Teleport containing element with v-if does not render at all

[obrejla]

Describe the bug A clear and concise description of what the bug is.

This is regression from testing-library/vue v6.6.1. When there is an element inside the Teleport component which has v-if attribute, then such element is not rendered in tests, when Teleport is stubbed. It used to work in v6.6.1 with testing-library/dom v8.19.0

To Reproduce Steps to reproduce the behavior:

Simple component example

<template>
    <Teleport to="#foo">
        <div v-if="isVisible" class="my-div">xxx</div>
    </Teleport>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";

const isVisible = ref(false);

onMounted(() => {
    isVisible.value = true;
});
</script>

With simple test example

import MyTest from "./MyTest.vue";
import { render, waitFor } from "@testing-library/vue";

describe("MyTest Tests", () => {
    it("should pass", async () => {
        const { container } = render(MyTest, {
            global: {
                stubs: {
                    teleport: true,
                },
            },
        });
        await waitFor(() => expect(container.querySelector(".my-div")).toBeInTheDocument());
    });
});

Expected behavior

div with class my-div is properly rendered and test passes

Related information:

• @testing-library/vue version: 7.0.0
• @testing-library/dom version: 9.2.0
• Vue version: 3.2.47
• node version: 16.13.0
• yarn version: 1.22.18

[bloor]

<Teleport to="body">
    <div class="full-page-load" v-if="replay.loading.state">
        <Loader size="48px" :text="replay.loading.text.join(`<br>`)" :color="replay.loading.color" />
    </div>
</Teleport>

It's 2024, on the latest nuxt build i'm still having this issue. v-if is not triggered on change, on production. Works fine in development.