vue-test-utils > 1.0.0-beta.12 fails with vee-validate

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.6
• vue/cli-plugin-unit-jest: 3.0.0-beta.6
• vue/cli-service: 3.0.0-beta.6
• vue/test-utils: 1.0.0-beta.10

Description:

Hi. I am having some trouble mounting a component which validate a custom component with Jest and Vee-Validate. When I am not unit testing, the components and validations work great. Having those errors when running my test:

[Vue warn]: Error in config.errorHandler: "TypeError: Cannot set property '_error' of undefined"
console.error node_modules\vue\dist\vue.runtime.common.js:1739
     RangeError: Maximum call stack size exceeded

(more details at the end)

Thank you very much in advance for your help.

Steps To Reproduce:

Here is the component I am unit testing, Step1.vue :

<template>
  <div class="step1">
    <test name="POD"  v-model="testData" v-validate="'required'"></test>
    <p v-show="errors.has('POD')" class="is-error">{{ errors.first('POD') }}</p>
  </div>
</template>

<script>
  import test from "./test.vue"

  export default {
    data() {
      return {
        testData: "test"
      }
    },
    components: {
      test
    }
  }
</script>

Here is the custom component under vee-validation, test.vue :

<template>
  <div>
    <p>{{currentValue}}</p><button @click="RemoveLetters">Remove letters</button>
  </div>
</template>

<script>
  export default {
    name: "test",
    props: ["value"],
    data() {
      return {
        currentValue: this.value,
      }
    },
    methods: {
      RemoveLetters: function () {
        this.currentValue = this.currentValue.substring(0, this.currentValue.length -2)
        this.$emit("input", this.currentValue)
      }
    }
  }
</script>

And here is my Step1.spec.js :

import { mount, createLocalVue  } from "@vue/test-utils"
import Component from "./Step1.vue"
import VeeValidate from 'vee-validate'

let localVue = createLocalVue()
localVue.use(VeeValidate)

describe("Step1.vue", () => {
  it("renders to a nice snapshot", () => {
    const wrapper = mount(Component, { localVue })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

Error message:

PASS  app\components\views\Step1\__tests__\Step1.spec.js
  ● Console

    console.error node_modules\vue\dist\vue.runtime.common.js:589
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot set property '_error' of undefined"
    console.error node_modules\vue\dist\vue.runtime.common.js:1739
      TypeError: Cannot set property '_error' of undefined
          at errorHandler (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\@vue\test-utils\dist\vue-test-utils.js:4446:13)
          at globalHandleError (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:1725:34)
          at handleError (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:1719:3)
          at Array.<anonymous> (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:1837:9)
          at flushCallbacks (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:1756:14)
          at <anonymous>
    console.error node_modules\vue\dist\vue.runtime.common.js:589
      [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
    console.error node_modules\vue\dist\vue.runtime.common.js:1739
      RangeError: Maximum call stack size exceeded
          at Watcher.cleanupDeps (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3183:11)
          at Watcher.get (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3154:10)
          at Watcher.run (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3217:22)
          at Watcher.update (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3205:10)
          at Dep.notify (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:695:13)
          at VueComponent.reactiveSetter [as $attrs] (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:1012:11)
          at updateChildComponent (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:2836:13)
          at prepatch (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:4142:5)
          at patchVnode (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:5923:7)
          at updateChildren (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:5820:9)
          at patchVnode (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:5934:29)
          at VueComponent.patch [as __patch__] (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:6094:9)
          at VueComponent.Vue._update (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:2668:19)
          at VueComponent.updateComponent (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:2786:10)
          at Watcher.get (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3140:25)
          at Watcher.run (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3217:22)
          at Watcher.update (D:\MUST\branches\11.0\SPAs\BookingOneStep\node_modules\vue\dist\vue.runtime.common.js:3205:10)

[constantm]

If you need setValue() in your tests (which was only added in Beta 17 - although I can only get it working in Beta 18), vee-validate testing works for me with test utils 1.0.0-beta.18. I’ve needed to use a mixture of sync:false on mount, running tests with async, as well as the flushPromises package.

[logaretm]

I installed @vue/test-utils 1.0.0-beta.16 and I got the same errors locally.

However, I tried running the tests/integration tests individually and the results were:

• aliases: Fails but it should fail since the test case is invalid (no .initial modifier used).
• classes: passes.
• dynamicRules: passes.
• events: passes.
• flags: passes.
• initial: passes.
• inject: passes.
• lifecycle: passes.
• model: fails but it shouldn’t.
• name: fails with the max stack error.
• scopes: fails with the max stack error.
• snapshots: passes.
• target: fails with the max stack error.
• types: passes.
• validity: passes.
• valueResolvers: fails with the max stack error.

We can safely say that the upgrade of vue-test-utils is what caused these tests to fail, after investigating those the model and aliases, they should pass but aliases test was a botched test, it shouldn’t have passed in previous versions. It now its corrected and should pass when using the .initial modifier in Aliases.vue component.

The models.js should pass, but it doesn’t because for some reason the watcher doesn’t fire when the model value changes from null to empty string, changing the value to an intermediate value then back to an empty string fixed the test. But again it shouldn’t fail unless I’m missing a critical change in how Vue compares initial values and what constitutes a change in model value.

Now with the “should pass” tests out of the way, while valueResolvers pass, it produces the error reported by @SwannLV and demonstrates the strange behavior of using any props on the template, for example using data-vv-name on the custom component triggers this error, but it isn’t reproducible in real-world tests.

At this point I ran out of ideas, and I suspect fixing https://github.com/vuejs/vue-test-utils/issues/532 would address this issue. Feel free to post any updates you may come across.