VeeValidateを使用したコンポーネントのユニットテストをする方法

はじめに

VeeValidate を Vue Test Utils でテストができるようにしましたので備忘録として投稿します。

VeeValidate を Vue Test Utils でテストする方法

VeeValidate を Vue Test Utils でテストするとき下記のように xxx.spec.jp を作ります。

import Vuex from 'vuex'
import VeeValidate, { Validator } from 'vee-validate'
import flushPromises from 'flush-promises'
import Form from '@/components/Form.vue'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VeeValidate)

describe('Form', () => {
  it('The name field is required', async () => {
    const wrapper = shallowMount(EntryForm, {
      localVue
    })

    wrapper.find('[name="name"]').setValue('')
    wrapper.vm.$validator.validateAll()
    await flushPromises()
    expect(wrapper.vm.errors.first('name')).to.equal('The name field is required.')
  })
})

おわりに

VeeValidateはフォームに入力してからエラーメッセージが表示されるまでタイムラグがあります。
初めは非同期でやっていたためにエラーメッセージが表示される前にテストが終わってエラーになってしまいました。
async , await flushPromises() を追記することで解決しました。