I have this strange error when I'm running a test on a ponent that's using vee-validate. What's even weirder is that it doesn't happen when I actually use this.errors
in that ponent (even putting console.log(this.errors)
is making it disappear).
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 '@/ponents/FolderSelect';
describe('FolderSelect', () => {
let propsData, wrapperDeep;
beforeEach(() => {
wrapperDeep = mount(FolderSelect);
});
it('renders select box if option "existing folder" is selected', () => {
// this code is forcing ponent to use vee-validate:
wrapperDeep.setData({folder: 'existing'});
});
Output from yarn test:unit
:
[Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '_transitionClasses' of undefined"
It's ing from node_modules/vue/dist/vue.runtimemon.js
, line 1739 and 589.
After I add to tested ponent:
created () {
console.log(this.errors);
},
The error is gone! Why the error appears otherwise? Is Vue clearing vee-validate if it's not used? (this.errors
is an ErrorBag added by vee-validate). Doesn't help if I add {{ errors }}
to the template, though.
I'm injecting vee-validate like this:
export default {
inject: ['$validator'],
(...)
I have this strange error when I'm running a test on a ponent that's using vee-validate. What's even weirder is that it doesn't happen when I actually use this.errors
in that ponent (even putting console.log(this.errors)
is making it disappear).
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 '@/ponents/FolderSelect';
describe('FolderSelect', () => {
let propsData, wrapperDeep;
beforeEach(() => {
wrapperDeep = mount(FolderSelect);
});
it('renders select box if option "existing folder" is selected', () => {
// this code is forcing ponent to use vee-validate:
wrapperDeep.setData({folder: 'existing'});
});
Output from yarn test:unit
:
[Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '_transitionClasses' of undefined"
It's ing from node_modules/vue/dist/vue.runtime.mon.js
, line 1739 and 589.
After I add to tested ponent:
created () {
console.log(this.errors);
},
The error is gone! Why the error appears otherwise? Is Vue clearing vee-validate if it's not used? (this.errors
is an ErrorBag added by vee-validate). Doesn't help if I add {{ errors }}
to the template, though.
I'm injecting vee-validate like this:
export default {
inject: ['$validator'],
(...)
I had the same problem try adding {sync: false}
after mounting the ponent
beforeEach(() => {
wrapperDeep = mount(FolderSelect,{sync: false});
});
This worked for me.
We hit this at work with @vue/[email protected]
, and it got resolved by updating to @vue/[email protected]
, without using sync: false
.