Vue-test-utils: v-data-table causing vue warn infinite update loop in component render function

[austi10]

Version

1.0.0-beta.30

Reproduction link

https://github.com/Austino18/Vue-Test-Utils-v1.0.0-beta30--using-Vuetify-Data-Table

Steps to reproduce

Clone/Download the github link provided and kindly follow the readme

What is expected?

The test should run without any vue warnings

What is actually happening?

v1.0.0-beta30 leads to the following:
Found in

---->VDataTable

---

The warning is encountered when using vue test utils v1.0.0-beta 30.
The same test case passes upon using the previous version, v1.0.0-beta29 without any warnings

[leoclipet]

Any news on this one ? I have actually a similar problem but I tried version beta 29, 30 and 31.

[austi10]

Any news on this one ? I have actually a similar problem but I tried version beta 29, 30 and 31.

I haven't heard anything from the team yet. Hopefully they provide a fix for it soon

[lmiller1990]

I notice the loop occurring if I remove the stubbed requestAnimationFrame. I guess you just stubbed that to avoid the infinite loops?

I wonder what changed in beta-30 that would be causing this. I'll think about this a bit today. The main priority at the moment is updating the codebase to work with Vue 3, and rewriting big chunks, so I can't promise I'll find a fix for this.

On the other hand, we are using libraries like Vuetify as part of the base test suite for the Vue 3 update, so bug like this should be much less common. One of the main pain points of the beta is poor support for third party component libs, which is one the main things we are looking to address.

If you would like to help out debugging this, I'd like at the release notes for v30 and see what might have caused this to happen. The process I usually follow from there is going into node_modules and commenting out the VDataTable code until the error stops - this is how I find the root problem.

[Ins1eme]

the same problem .31 @lmiller1990

[andriymurovanyi]

Also i have the same problem.

[bob-lee]

Downgrading to 1.0.0-beta.29 was a temporary fix for this issue for me. Also it runs a lot quicker than 1.0.0-beta.30

[lmiller1990]

Thanks for the feedback all - I can take a look at the diff between beta-29 and beta-30 sometime this week, if anyone else wants to help https://github.com/vuejs/vue-test-utils/releases/tag/v1.0.0-beta.30

Something to do with sync mode getting removed I guess? Hm.

[mkalam-alami]

I also reproduce the problem with 1.0.0-beta.31, downgrading to 29 works.
If it helps, I have tried toggling the sync option on 29 but I can't trigger the error at all.

[d2phap]

I got the same problem

[lmiller1990]

I haven't had a chance to look at this - focusing on Vue 3 integration (which includes better support for Vuetify and none of this sync legacy stuff that messes everything up).

For now, it seems the best work around is downgrading to 29 (not great, but I don't have anything better at the moment, sorry all).

Happy to help guide someone who wants to dive into this issue, can ping me here or Vueland.

[pgoshulak]

I dug into this a while back and it seems like the issue is in VDataIterator (which is extended by VDataTable)

[nekosaur]

In https://github.com/nekosaur/Vue-Test-Utils-v1.0.0-beta30--using-Vuetify-Data-Table I've created two minimal reproductions of the v-data component which is the root component of v-data-iterator, and by extension v-data-table.

The only difference between them is that one (Foo) is wrapped in Vue.extend() and one is not (Bar).

Foo has an infinite loop, Bar has not. And I'm not sure why. Unless I'm missing something obvious.

[byshine]

Any solutions? Still getting this error

[Martin7mind]

Also have this error. Ive tried with 5 versions of vue test utils without success. Only rendering a v-data-table in the test..
updated: works with v28. somehow my v30 was still in node_modules when downgrading

[lmiller1990]

@nekosaur great findings... something to do with this maybe? https://github.com/vuejs/vue-test-utils/compare/v1.0.0-beta.29...v1.0.0-beta.30#diff-68ebb4dd9f4503e2b26a1b1ac98d4fa2R77

There is no solution for this error yet, but seems like we have a good way to debug it now based on what @nekosaur discovered and confirmed by @pgoshulak . Something to do with extend!

VDataIterator code: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataIterator/VDataIterator.ts

It could be something to do with using createElement, which gets patched by VTU for shallowMount: https://github.com/vuetifyjs/vuetify/blob/9d69b752b64d5e8c7f18bbaacbb0d35282dfa400/packages/vuetify/src/components/VDataIterator/VDataIterator.ts#L293 I suspect it is something to do with this. Most Vuetify functions seem to use h, eg https://github.com/vuetifyjs/vuetify/blob/9d69b752b64d5e8c7f18bbaacbb0d35282dfa400/packages/vuetify/src/components/VInput/VInput.ts#L315 I wonder why they use createElement here?

I wonder if we can simply not patch createElement if we are in mount mode. That might fix this. I can try debugging this again this week since we have some more information now. First thing I will do it try using h instead of createElement in Vuetify, then patching VTU's createElement if that doesn't work.

[dsarmientodraymaster]

Happening to me with:

• v-data-table
• v-select

I tried 1.0.0-beta.32, 1.0.0-beta.31, 1.0.0-beta.30, 1.0.0-beta.29, 1.0.0-beta.28 without luck.

I silenced the warning in the meantime.

[dsarmientodraymaster]

@bob-lee

Downgrading to 1.0.0-beta.29 was a temporary fix for this issue for me. Also it runs a lot quicker than 1.0.0-beta.30

Can you tell us which Vuetify version are you using?

[bob-lee]

@dsarmientodraymaster [email protected]

[dsarmientodraymaster]

I finally managed to get it working by:
setting "@vue/test-utils": "1.0.0-beta.29", notice the abscence of ^ in front of the version (we want to lock it)

then add sync: false in the mount options

mount(component, {
    ...options,
    store: vuexStore,
    localVue: Vue,
    sync: false,
    vuetify: new Vuetify()
  })
}

[lmiller1990]

What, really? Sync mode is still causing problems? Hm.

I found a fix for this which is adding

if (!Object.keys(stubs.length) && !stubAllComponents) {
  return

  // original code
}

to this line https://github.com/vuejs/vue-test-utils/blob/0c4a8110b4aa72653cbfce9568a07a3a870a0825/packages/create-instance/patch-create-element.js#L47

however this would break stubs. Not sure how much time/effort it will be to fix this, and the overall benefit - this seems to only happen for VDataTable?

Vue 3 support will be an entire separate codebase since a large number of the internals we use this this codebase are gone, making it near impossible to migrate. We now know sync and patching createElement leads to seemingly unless bugs/edge cass.

[dsarmientodraymaster]

@lmiller1990
The problem is there in version 1.0.0-beta.29.
I didn't have the sync problem with the latest one.

The infinite update loop happened to me in
v-data-table and v-select (I'm only using those, the error may be affecting more components)

[gregveres]

I ran into this today with v-data-table.
So I followed the suggestions here to drop back to beta-29. That indeed fixed the issue with v-data-table. But now one of my shallowMount tests is failing saying that the maximum call stack size exceeded where the test was passing with beta-32. The new failure is strange because it seems like a simple component that uses v-sheet a number of divs and a v-hover. Since it is a shallow mount, these are stubbed.

Maybe I am doing something wrong with my reactivity...

[alkin]

I believe this was resolved in 1.0.0

[gregveres]

@alkin Thank you very much for posting your message. I would have missed the fact that it is fixed.

My case is definitely fixed with the 1.0.0 release of @vue/[email protected].

I had to skip some of my tests when I moved back to beta-29 to fix this issue, but now with 1.0.0 I was able to enable all of my tests (the ones that failed on beta-29 and the ones that failed on post beta-29).

The one thing that surprised me was the deprecation warning of IsVueInstance. No big deal, I just removed those tests since they don't really provide any value, IMHO. I had them in there because a generator function I wrote was dumping them in so that the test file had a single test.

Personally, I think you can flag this as fixed with the release of 1.0.0

[lmiller1990]

Yep. isVueInstance is not very useful. That is why is was removed.

Glad to hear this is fixed!