Vee-validate: Unit testing: 'Injection "$validator" not found'

[MatteoGabriele]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.4

Description:

I have installed vee-validate with the inject property on false, and then I have a child component that has an inject: ['$validator'] and a parent with $_veeValidate.validator = 'new'.
This works perfectly everywhere besides during unit testing.

Steps To Reproduce:

this is my component test and the BaseInput component it is just a component that handles the error handling and the input itself, then it passes all the validation to the parent.

import { mount, createLocalVue } from '@vue/test-utils'
import idObj from 'identity-obj-proxy';

import BaseInput from '@/components/BaseInput'
import VeeValidate from 'vee-validate'

const localVue = createLocalVue()

localVue.use(VeeValidate, {
  inject: false
})

describe('<base-input>', () => {
  it ('should render one input tag', () => {
    const wrapper = mount(BaseInput, {
      localVue,
      propsData: {
        name: 'foo'
      },
      mocks: {
        $style: idObj
      }
    })

    expect(wrapper.contains('input')).toBe(true)
  })
})

When I run the test, it passes but I have a warning in the terminal

[Vue warn]: Injection "$validator" not found

Do you know how to avoid this behavior?

Thanks for you time

[lemind]

Same thing

[logaretm]

That is weird, since I already have a test setup for that feature which is run on every commit.

[lemind]

@logaretm
I've reproduced this behavior on your unit tests.
I have added injecting into parent component and I have got this result

I suppose it is ok add injecting into parent component, is't it?

BTW I can see more than one broken tests.

[logaretm]

I guess that's because there is no provider for the $validator dependency in the component tree, It works fine in production because there is a root instance that will always have its own validator and can provide it. In tests, it could be different.

Anyways you can fix that in your tests by making the root instance provide the validator instance:

const v = new VeeValidate.Validator();
const wrapper = mount(TestComponent, {
  localVue: Vue,
  provide: () => ({
    $validator: v
  })
});

[lemind]

It works. Thank you.

[MatteoGabriele]

thanks! works :)

[lusarz]

@logaretm I have small problem with that, but it may be also related with vue-test-utils (on beta.12 this issue didn't occur).

In unit tests I have computed variable:

errorMessage() {
  return this.errors.first("sample-input");
}

After blur on input -> wrapper.find('input').trigger('blur') -> I expect message to be shown, but in my case it's not.

Here are reproduction links:
1) https://codesandbox.io/s/r73x66o1o
2) https://codesandbox.io/s/134jzjppnl

In first case it works (just click in input, and then click outside - you'll see error message below). Second situation is a bit different, I set inject to false:

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

and inject inside component:

inject: ["$validator"]

and then it didn't works. Do you have idea what may be the issue here ?