如何在VUE 3X中使用VUE测试图表施加重新渲染？

发布于 2025-01-23 21:38:32 字数 1294 浏览 0 评论 0 原文

我正在使用 d3 和 vue 3x 构建一个组件，并且我正在用 vue-testing-library-7x 进行测试

。我要测试的组件不是重新渲染的 - 我意识到这里有一个问题： https://github.com/testing-library/vue-testing-library/issues/77 ，但显然似乎不起作用。现在，对于某些代码，

组件看起来像这样：

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

我的测试看起来像：

 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();

      });
      
    });

两个测试用例分开通过，但是当我一起运行它们时，它会失败 - 我正在使用 vitest and jest

原文

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