VueJS Mocha Test case failing when using VeeValidate

Question

I am trying to write a unit test case for the UI which is using VeeValidate library. The UI code looks like this:

                <b-card-header>
                    <h4>Override Fields</h4>
                </b-card-header>
               <b-form @submit.stop.prevent="onSubmit">
                <b-row>
                  <b-col sm="12">
                       <b-form-group>
                          <label for="name">Id</label>
                          <b-form-input id="ID" name="ID" v-model="id"  type="text" 
                          v-validate="{required : true, min: 3, max:100 }"  class="mb-1" 
                          placeholder="Enter a valid Id." /> 
    
                          <div class="help-block alert alert-danger"  v-show="errors.has('ID')">
                              {{  errors.first('ID') }}
                          </div>
                        </b-form-group>

Validation is working as expected. When I try to write a simple test case as:

import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/views/MyComponent.vue';
import VeeValidate from 'vee-validate';



describe('MyComponent.vue', () => {

  const Vue = createLocalVue();
  Vue.use(Vuex, VeeValidate);
  let actions
  let store

  beforeEach(() => {
    store = new Vuex.Store({
      actions,
      store
    })
  })


  it('sets the correct page header', () => {
    const wrapper = shallowMount(DataOverride, { sync: false, localVue: Vue, store: store });
    const pageHeader = wrapper.find('h4').text();

    expect(pageHeader).toBe('Override Fields');
  })
})

I get following error :

[Vue warn]: Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for
        class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
    
    
    [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'has' of undefined"
    TypeError: Cannot read property 'has' of undefined

Can you please let me know what is wrong in my test case ?

Answer 1

This is how I arranged my code and it works just fine:

import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/views/MyComponent.vue';
import VeeValidate from 'vee-validate';

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

describe('MyComponent.vue', () => {
  let actions
  let store

  beforeEach(() => {
    store = new Vuex.Store({
      actions,
      store
    })
  })


  it('sets the correct page header', () => {
    const wrapper = shallowMount(DataOverride, {
        sync: false,
        localVue,
        store: store
    });

    const pageHeader = wrapper.find('h4').text();

    expect(pageHeader).toBe('Override Fields');
  })
})

I hope this helps you.