jest tests are not working anymore with vee-validate 2.1.0-beta.4

[ChristianStornowski]

Versions

• vee-validate: 2.1.0-beta.4
• vue: 2.5.16

Describe the bug
After installing 2.1.0-beta.4 jest tests are not working anymore that are using vee-validate.
Reverted back to 2.1.0-beta.2 everything is working.

console.error node_modules/vue/dist/vue.runtime.common.js:589
    [Vue warn]: Error in directive validate update hook: "TypeError: Cannot read property '_transitionClasses' of undefined"

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/p37x443wmx
2. Download project
3. npm i
4. npm test

Expected behavior

HelloWorld
    ✓ correctly mounted (22ms)

Demo Link
https://codesandbox.io/s/p37x443wmx

[logaretm]

Currently, there is an issue with vue-test-utils > 1.0.0-beta.12, they always fail for vee-validate due to the async behavior being forced to sync. continue the discussion in #1267

Your project works fine if you downgrade to test-utils@1.0.0-beta.12

[ChristianStornowski]

Thanks for the information. :-)

[mkhanal]

I had the same issue. Downgrading vue-test-utils did not work. I had to downgrade vee-validate to 2.0.9 to make it work.

[constantm]

Have the same issue and @logaretm's suggestion to downgrade seemed to have done the trick.

[devCrossNet]

@logaretm do you keep us up to date?

I wanted to update to vee-validate version 2.1.7 but I get this error running the tests, so it's not possible to update from version 2.0.9 (which kind of is a BC break :-/).

[ericbond007]

I'm using mocha, but I'm seeing the same issue on my end. I've tried the solutions suggested above, including downgrading vee-validate, but I'm not making any progress.

I have a suspicion that the root $el is not being mounted correctly. That, or the vee-validate checks for $el aren't working when using vue-test-utils localVue.

Has anyone else had any luck getting this to work? I'm this close to finding another validation library just so I can get my unit tests to work.

[renestalder]

Facing the same problem and I had to downgrade the vue-test-utils to beta.12 (which brings some other problems back).

So we're now at beta.29 of vue-test-utils. What's the current correct fix to this? Is that something on vee-validate side or something on vue-test-utils side? Because I found threads on both ends.

As sync: false doesn't work for me on beta.29.

[logaretm]

@renestalder vue-test-utils plan to remove the sync rendering in future versions since Vue 3.x will not support that.

with that in mind, vue-test-utils doesn't play well with async stuff, watchers, UI updates, etc... are all async in real-world, so a lot of issues will come out of any tool that will employ that fact since vee-validate is template based, it relies on that a lot.

For example, the directive tests fail because el is undefined which cannot happen in any real-world test, a directive is always placed on an element, there is no way el is undefined which is the main culprit for vue-test-utils.

Once a stable release is tagged I will review the tests, and see if there is an issue on vee-validate end. But normally the only workaround is to use sync: false and flushPromises which should work in most cases.

The only good news I have is that v3 works fine with the latest test-utils (directive deprecated), but I'm afraid a lot of stuff needs to be ironed out before I can start tagging 3.x.