Vue-test-utils: "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 https://github.com/vuejs/vue-test-utils/issues/532?

[38elements]

I think this is related below.
https://github.com/baianat/vee-validate/issues/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()  
  })
});

https://github.com/vuejs/vue-test-utils/issues/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 https://github.com/vuejs/vue/pull/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 🤞

[JFGHT]

I'm still having this very same issue with: [email protected], @vue/[email protected] and [email protected].

sync:false supresses the error.

[m4ss1m0g]

Similar error with shallowMount

"TypeError: Cannot read property 'removeAttribute' of undefined"

Solved with sync: false

[kotanagasruthi]

I am Getting "TypeError: Cannot read property '_transitionClasses' of undefined" this error while I am using JSON.parse(JSON.stringify(obj)) for a deep copy...! i tried {sync: false} and it is giving some other error..help me out!! Thankyou

[advsoft]

I am also getting this errors randomly. Sometimes it fails with it, sometimes passes. I am using [email protected], @vue/[email protected] and [email protected]. sync is set to false on mount:

localVue.use(VeeValidate, {
  inject: true,
  fieldsBagName: 'veeFields',
  errorBagName: 'veeErrors'
})
localVue.use(Vuex)
....
const wrapper = mount(Component, { 
      localVue, 
      sync: false 
    })

So it is obviously far from fixed...

[SergeyNI]

I had the same issue. I had several items "it". Option sync:false not helped for me, when I once inserted to mount. Problem invoked in strong second item "it". When I put in each item then it worked for me.

it('Has text password', () => {
const wrapper = mount(SignUp, { localVue, vuetify, store, i18n, router, sync: false })
const password = wrapper.vm.$t('password')
expect(wrapper.text()).toContain(password)
})
it('has text email', () => {
const wrapper = mount(SignUp, { localVue, vuetify, store, i18n, router, sync: false })
expect(wrapper.text()).toContain("email")
})