javascript - vue.runtime.common.js: "Cannot read property '_transitionClasses' of undefined" w

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'],
    (...)

• javascript
• vue.js
• vee-validate
• vue-test-utils

Share Improve this question Follow asked Jul 17, 2018 at 10:34 van_folmertvan_folmert 4,5371010 gold badges5151 silver badges9797 bronze badges 7

• Try this: import { TransitionGroupStub } from '@vue/test-utils' Vue.ponent('transition-group', TransitionGroupStub) – Aldarund Commented Jul 17, 2018 at 10:49
• @Aldarund no difference :( – van_folmert Commented Jul 17, 2018 at 10:53
• What about vue test util version? Anything higher than beta12 wont work – Aldarund Commented Jul 17, 2018 at 11:09
• 1.0.0-beta.20, but from what I read it should use TransitionGroupStub and TransitionStub by default – van_folmert Commented Jul 17, 2018 at 11:18
• 1 beta20 wont work with vee validate. And with a lot of other libs too like vuetify. Beta 12 is a higher version that work with them – Aldarund Commented Jul 17, 2018 at 11:43

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

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.