"Cannot read property '_transitionClasses' of undefined" when injecting vee-validate which is not used

[folmert]

Version

1.0.0-beta.20

Reproduction link

https://cli.vuejs.org/guide/prototyping.html

Steps to reproduce

I have this strange error when I'm running a test on a component that's using vee-validate. What's even weirder is that it doesn't happen when I actually use this.errors in that component.
this.errors is an ErrorBag added by vee-validate, and it makes the error disappear even if I just add a dummy line like console.log(this.errors); or this.errors; into the tested component's created hook.

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 wrapperDeep;

beforeEach(() => {
    wrapperDeep = mount(FolderSelect);
});

it('renders select box if option "existing folder" is selected', () => {
    // this code is forcing component 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 coming from node_modules/vue/dist/vue.runtime.common.js, line 1739 and 589.

After I add to tested component:

created () {
    console.log(this.errors);
},

The error is gone! Why the error appears otherwise? Is Vue clearing vee-validate if it's not used and in result breaking these transitions? Doesn't help if I add {{ errors }} to the template, though.

I'm injecting vee-validate like this:

export default {
    inject: ['$validator'],
    (...)

Not sure if this error is caused by Vue, vue-test-utils or vee-validate, but since it doesn't throw this error on dev and production build, it must be sth with vue-test-utils.

What is expected?

The error should be gone.

What is actually happening?

I get "TypeError: Cannot read property '_transitionClasses' of undefined"

[folmert]

I've just downgraded to beta.12 and the error is gone. Maybe something related to #532?

[38elements]

I think this is related below.
logaretm/vee-validate#1267

[eddyerburgh]

Can you try setting sync to false when you mount a component:

it("renders", () => {
  let wrapper = shallowMount(demo, { sync: false });
  wrapper.setData({selectedDate: testDate})
  setTimeout(() => {
    wrapper.vm.selectedDate.should.be.equal(testDate)
  done()  
  })
});

#676

[tradingstratagem]

I tried with { sync: false } and it worked for me

[eddyerburgh]

I've confirmed that this issue is with the current sync implementation, and will be fixed when by vuejs/vue#8240

[Dayjo]

Just a FYI, I am getting this error on beta.25, if I mount with sync:false then it supresses the error.

[nlitwin]

I'm still getting this error with sync: false and using wrapper.vm.$nextTick(() => {}. I also tried setTimeout instead of nextTick.

My component calls this.$forceUpdate(), and if I remove that line, the test runs. With this.$forceUpdate() I get the _transitionClasses error.

I'm on Vue version 2.6.10 and vue-test-utils version 1.0.0-beta.29

[Loschcode]

As weird as it appears I had the exact same error on NuxtJS in production [only]. This makes a blank page as a result if you access it via direct link. I fixed it by moving the logic from created() to mounted().

Hope it helps someone else someday 🤞