vue-test-utils: Cannot read property 'has' of undefined

[codedbyrob]

Versions:

• VueJs: 2.5.16
• Vee-Validate: 2.0.9
• vue/test-utils: 1.0.0-beta.24

Description:

Thanks for this awesome library first of all.

I'm trying to test a component which uses errors.has(), but when running the test I get Cannot read property 'has' of undefined. The validation works great in browser however.

I'm using Jest alongside vue-test-utils. I'm unsure if this is related to #1267 but I've tried the suggested solution of downgrading test-utils, without any success. I suspect this is a problem with me missing something rather than the library?

Steps To Reproduce:

Here's my test (with anything unrelated to vee-validate removed):

import Vuex from 'vuex';
import VeeValidate from 'vee-validate';
import flushPromises from 'flush-promises';

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

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

  // Mock some Vuex state here

  it('Correctly populates the page title from the Vuex store', async () => {
    const v = new VeeValidate.Validator();
    const wrapper = mount(SurveyPageBuilder, {
      store,
      localVue,
      provide: () => ({
        $validator: v,
      }),
    });

   await flushPromises();

   const pageTitleVal = wrapper.find({ ref: 'pageTitleInput' }).element.value;

   expect(pageTitleVal).toBe('Page title test');
  });
});

Also maybe useful to know that when registering my component, I set inject to false:

  Vue.use(VeeValidate, {
    events: 'change',
    inject: false,
  });

Then inject it manually in the component:

inject: ['$validator'],

[logaretm]

You should install each plugin in its own statement as the second parameter to Vue.use is the config for that plugin.

// you are not installing vee-validate, you are passing it as an option object to vuex install function.
localVue.use(Vuex, VeeValidate);

// install both
localVue.use(Vuex);
localVue.use(VeeValidate);