template fails to re-render when ref value is changed under test when using [email protected]

[admhpr]

Subject of the issue

template fails to re-render when ref value is changed under test when using [email protected]

template does update with user interaction in browser.

elements using v-if directive fail to re-render when predicate value changes during unit testing.

Steps to reproduce

https://codesandbox.io/s/fervent-tdd-fijnxf

run npm run test

Expected behaviour

template is re-rendered and relevant elements found using wrapper.find/wrapper.findAll

Actual behaviour

no change in template

Possible Solution

?

much appreciated!

[kingyue737]

elements using v-for directive do not update either

[admhpr]

likely related #1983

[kingyue737]

likely related #1983

I don't think so. Their issue is related to vue-jest, while we use vitest.

[lmiller1990]

Could be a bit of both. Likely both Vue Jest and Test Utils need patching.

[dneuschaefer-rube]

I believe this is a case of the dual package hazard that has already caused issues at other places (see e.g. vuejs/vue#12626).

Essentially, the vite plugin for vue2 aliases vue imports to the ESM file (vue.runtime.esm.js), while imports through VTU go to vue.runtime.mjs, which re-exports from vue.runtime.common.js. That means that watchers imported from other files (e.g. through composables) or the watcher to re-render the template are set up on a the wrong Vue instance, and thus don't trigger as expected.

Unfortunately I'm not sure what the "proper" workaround for that is; I could see the root issue being with the vite plugin, the way VTU imports Vue, or even with the exports declaration from the vue package. Maybe someone else has a better understanding there.

What does work as a temporary fix though is to override the resolve alias defined through the vite plugin in your test config:

resolve: {
    alias: {
        vue: 'vue/dist/vue.runtime.mjs',
    },
},

While there's good reason to use the ESM build in production, that should be fine for the test execution.

[kingyue737]

@dneuschaefer-rube All tests pass. Thanks!!

[lmiller1990]

I looked into this here vuejs/test-utils#1665 (comment)

I think there might be a bug in Vitest around resolving the correct module for Vue compat. I don't know if it's related to the issue here, but this info might help people from from Google with a Vitest/Test Utils/compat issue.