How to force a re-render with vue-testing-library in vue 3x?

Question

---

I am building a component with d3 and vue 3x and I am writing tests for the same with vue-testing-library-7x

the problem is that the component that i want to test is not re-rendering - i realised that there was an issue regarding this here: https://github.com/testing-library/vue-testing-library/issues/77 but apparently seems to not work. Now for some code

the component looks like this:

<template>
<h2>simple d3</h2>
    <svg id="area" role="img"></svg>
</template>
<script setup lang="ts">

my tests look like this:

 describe("basic svg", async () => {

      test("basic page render test case", async () => {
        const {findByText } =  render(GetSimpleSVG)

        const component = await findByText("simple d3"); // this is the header

        expect(component).toBeVisible();
      });

      test("svg rendered", async () => {

        const {findAllByRole} = render(GetSimpleSVG);
        const component =  await findAllByRole("img");

        expect(component).not.toBeNull();

      });
      
    });

the two test cases pass separately, but when i run them together, it fails - i am using vitest and jest

Answer 1

pass "key" as a prop to your components with different value when you are rendering them. (testing-library.com/docs/vue-testing-library/api#props-object) see what happens.