template fails to re-render when ref value is changed under test when using vue@2.7.3

Subject of the issue

template fails to re-render when ref value is changed under test when using vue@2.7.3

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!

[dneuschaefer-rube]

I believe this is a case of the dual package hazard that has already caused issues at other places (see e.g. https://github.com/vuejs/vue/issues/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.

[admhpr]

likely related #1983