Vee-validate: Unit Test : wrapper.vm.errors.count() always returns 0

[kristianjabilles-ms]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.4

Description:

Hi,
I am trying to test a form component built with vuejs and vee-validate but
wrapper.vm.errors.count() is always returning 0.

I am using v-model which is coming from a vuex getter.
am I missing something? Can you please help me on this issue?

Thanks in advance.

Steps To Reproduce:

component.vue

<template>
  <div>
    <input name="firstName" type="text" v-validate="'required'" v-model="contactForm.firstName">
    <input name="lastName" type="text" v-validate="'required'" v-model="contactForm.lastName">
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    computed: {
      ...mapGetters([
        'contactForm'
      ])
    }
};
</script>

I tried this as approach also and gave me the same result,

wrapper.vm.errors.count() returns 0

<template>
  <div>
    <input name="firstName" type="text" v-validate="'required'" v-model="contactForm.firstName">
    <input name="lastName" type="text" v-validate="'required'" v-model="contactForm.lastName">
  </div>
</template>

<script>

export default {
    data: function () {
       return {
        contactForm: {
          firstName: '',
          lastName: ''
       }
    }
};
</script>

spec

import { createLocalVue, mount } from 'vue-test-utils'
import VeeValidate from 'vee-validate'
import Component from 'component.vue'

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

describe('Invalidation by vee-validate', () => {
  it('should validate user form', async () => {
    const wrapper = mount(Component, { localVue })
      wrapper.setData({
        contactForm: {
          ...wrapper.vm.contactForm,
          firstName: ""
        }
      })

      console.log(wrapper.vm.errors.count());
      expect(wrapper.vm.errors.count()).toBe(1);
  })
})

Thanks in advance

[logaretm]

validations are run asynchronously, meaning the errors won't appear immediately. You can use flush-promises to handle that like in the vee-validate tests.

https://github.com/baianat/vee-validate/blob/master/tests/integration/model.js#L13

[deepaksisodiya]

@logaretm Thanks a lot :)
It helped me.