Have a hair-pulling component test

[matthew-dean]

I have a component that will not update its state in the Vue test with Vitest / Vue Test utils no matter what I do. I've logged everything to make sure the data FOR the template is in the correct state.

No matter what, the mounted component will not update a child component when its state has changed. It updates fine in the actual DOM, but Vue Test Utils will not update it. I tried to reduce it to a simple test case and could not. It worked in the simple case on Stack Blitz.

I even used the @vueuse library to use promise timeouts, and used Vue Test Utils flushPromises (plus nextTick()) to make sure enough time has been granted for the template. No matter what I try, Vue Test Utils (or JSDom?? or Vue??) will never ever ever update the component in the HTML.

I've spent about 8 hours trying to get Vue to work like Vue, or Vue Test Utils to work like Vue Test Utils, and this one child component will never update. Never. It has all the correct data. All the correct state. But the Vue Test insists that the template cannot and will not change, even though the computed property itself that triggers the change IS IN THE CORRECT STATE.

I'm wondering if anyone can help me?

[matthew-dean]

Okay, I guess what I didn't realize is that components do not auto-unmount from the DOM in tests? And so, somehow, the component was maintaining state... which... meant that tests fail?

Is this a bug?

https://stackblitz.com/edit/github-angawd-h9onf7?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

[freakzlike]

Hi @matthew-dean,
the component is not actually attached to the DOM. This can be achieved by attachTo. Furthermore to unmount the wrapper you need to either call wrapper.unmount() at the end of each test or use enableAutoUnmount.

Your repro is working for me, when I replace await nextTick() by await flushPromises(). nextTick waits for the next render tick of Vue while flushPromises resolves after all existing promises are resolved, which actually includes the next tick. I prefer using only flushPromises as it's more robust.