Bug: ref reactivity isn't maintained when testing

[InjustFr]

Describe the bug When updating a non template ref through code, v-if changes doesn't seem to update As you can see in the linked stackblitz, we have a conditional rendering depending on a ref opened with a default value of false. This ref is updated on mount thanks to a prop called show

As you'll find in the test, we set the show prop to true on mount but the DOM isn't updated and the content isn't rendered, failing the test. If you dump the HTML you can see it renders to <!--v-if--> instead of the desired html structure

This is a simplified case of a more complex component where I need to have a separate prop from the conditional rendering

To Reproduce https://stackblitz.com/edit/github-dgffss?file=src%2Fcomponents%2FHelloWorld.vue

Expected behavior I would expect ref reactivity to still work in test environments

[cexbrayat]

Hi @InjustFr

Thanks for the repro. As you update the ref in onMounted, you need to call await nextTick(); in your test after mounting your component to let Vue update the template.

  it('renders properly', async () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Hello Vitest', show: true },
    });
    await nextTick();

See https://test-utils.vuejs.org/guide/advanced/async-suspense.html