Vuelidate Error in render: “TypeError: Cannot read property 'proxy' of undefined”

[ParsonsProjects]

Version

1.0.0-beta.20

Reproduction link

https://github.com/ParsonsProjects/vue-cli-sandbox/tree/jest-vuelidate

Steps to reproduce

RUN npm install

RUN npm run test:unit

THEN a warning will be thrown in the test results.

What is expected?

WHEN i run npm run test:unit

THEN no error is thrown by vuelidate

What is actually happening?

WHEN i run npm run test:unit

THEN the error is being thrown by vuelidate

---

This error is only being thrown when running the unit tests and not when running npm run serve which might be something to do with how the lifecycle of data is being handled when running tests. I am not 100% sure about this.

When I was trying to debug the issue it looked like the new item was not being added to the array before vuelidate was looking for the new item.

Any help would be greatly appreciated. Thanks

[bas72]

Don't know if it will help you at all but I was experiencing this same error and in my case I fixed it by changing my multistep form containers from v-show to v-if.

[ParsonsProjects]

Thanks for the comment, none of the children have v-if or v-show on them.

Its almost like something different is happening between the way the test utils is running the Vue component and the data is not being updated in the same way, as the warning is only shown in when running the unit tests. $nextTick or $forceUpdate might help but I am not sure how to implement that when Vuelidate is a separate package.

[eddyerburgh]

This is an issue with how Vue Test Utils implements synchronous updates. This is a known issue that will be fixed after the next patch version of Vue (2.5.18) is released (which includes synchronous rendering in core).

In the meantime, you can set sync to false:

it('renders props.msg when passed', () => {
  const wrapper = mount(Home, {
    localVue,
    store,
    sync: false
  })
  wrapper.find('#add').trigger('click')
  expect(wrapper.vm.people).toMatch('sss')
})

This sets all watchers to run on the next event loop tick.

If you are unable to upgrade to Vue 2.5.18 you should run all your tests with sync false, since in the future synchronous updating will not be supported in Vue Test Utils Vue < 2.5.18.