I encountered a strange issue while running a test on a component that utilizes vee-validate. What's even more bizarre is that the error doesn't occur when I use this.errors in the component (even simply including console.log(this.errors) seems to make it disappear).
Here is an excerpt of the test code:
import { mount } from '@vue/test-utils';
import { renderToString } from '@vue/server-test-utils';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateConfig from '@/vee-validate-config';
Vue.use(VeeValidate, VeeValidateConfig);
import FolderSelect from '@/components/FolderSelect';
describe('FolderSelect', () => {
let propsData, wrapperDeep;
beforeEach(() => {
wrapperDeep = mount(FolderSelect);
});
it('renders select box if option "existing folder" is selected', () => {
// this code forces the component to utilize vee-validate:
wrapperDeep.setData({folder: 'existing'});
});
Upon executing yarn test:unit, the following warning is displayed:
[Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '_transitionClasses' of undefined"
This error originates from
node_modules/vue/dist/vue.runtime.common.jsRemarkably, adding the following snippet to the tested component resolves the error:
created () {
console.log(this.errors);
},
But why does the error appear in the first place? Could it be that Vue clears vee-validate if it's not actively being used? (this.errors represents an ErrorBag introduced by vee-validate). Oddly enough, incorporating {{ errors }} in the template does not mitigate the issue.
My approach to injecting vee-validate looks like this:
export default {
inject: ['$validator'],
(...)