Jest で Nuxt.js の Vue コンポーネントをテストする

環境

• Nuxt v2.9.2
• Node v10.15.2
• yarn 1.21.1
• TypeScript
• vue-property-decorator

テストに必要なもの

• 単体テストライブラリ
  • vue-test-utils
  • 公式ドキュメント(日本語)
• テストランナー
  • jest
  • 公式ドキュメント(日本語)

セットアップ

• TODO: あとでかく。

input のテスト

コンポーネント

<label>
  <input type="text" :value="name" @input="$emit('input', $event.target.value)">
</label>

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component()
export default class MyInput extends Vue {
  @Prop({ default: '' }) name: string
}

テストファイル

今回は以下の内容をテストします。

• props の確認
• emit の確認

import MyInput from '@/components/MyInput.vue'
import { shallowMount } from '@vue/test-utils'

describe('MyInput.vue', () => {
  it('props の確認', () => {
    const wrapper = shallowMount(MyInput, {
      propsData: {
        name: 'shts'
      },
    })
    expect(wrapper.props().name).toMatch('shts')
  })
  it('emit の確認', () => {
    const w = shallowMount(MyInput)
    w.find('input').setValue('shts')
    expect(w.emitted().input).toBeTruthy()
    expect(w.emitted().input[0]).toEqual(['shts'])
  })
})