如何在 React 测试库中的多个测试中使用单个渲染。？

Question

在使用 Jest 和 React 测试库时，是否可以在多个测试中保持相同的 render()？我正在构建一个 Trivia 应用程序，并且有一个组件可以在用户完成测验时显示不同的问题。为了测试选择按钮、提交按钮的功能，并检查正确的屏幕是否在正确的时间显示，我需要在测验的不同阶段对相同的渲染组件执行测试。例如：

describe("Question Screen", () => {

    it("should render the first question when difficulty button is clicked", async () => {
        render(<TriviaBox/>);
        const btn = screen.getByRole("button", {name: /easy/i});
        fireEvent.click(btn);

        const heading = await screen.findByText("Question 1");
        expect(heading).toBeInTheDocument();
    });

    it("should display the next question when the current question is answered", async () => {
        render(<TriviaBox/>);
        const btn = screen.getByRole("button", {name: /easy/i});
        fireEvent.click(btn);

        const correctAnswer = await screen.findByRole("button", {name: /Nevada/i});
        const submit = await screen.findByRole("button", {name: /Submit/i});
        fireEvent.click(correctAnswer);
        fireEvent.click(submit);

        expect(wait screen.findByText("Question 2")).toBeInTheDocument();
        expect(wait screen.findByText("Which is the largest state?")).toBeInTheDocument();
        expect(wait screen.findAllByRole("radio")).toHaveLength(4);
        ...
    });
});

有没有办法保留第一个测试的相同渲染以用于第二个测试，而不是重新渲染相同的组件并再次遍历第一个问题以测试第二个问题？

Answer 1

基本上，您需要禁用自动清理，因为它会在每次测试后卸载 React 树。 请参阅文档：https://testing-library.com/docs/react-testing-library/setup/#skipping-auto-cleanup。 但在这种情况下，您应该注意手动调用 cleanup 以免影响下一个测试。

这里是一个小的工作示例，说明如何通过导入“@testing-library/react/dont-cleanup-after-each”来做到这一点：

import "@testing-library/react/dont-cleanup-after-each";
import { render, screen, cleanup } from "@testing-library/react";

function TestComponent() {
    return (
        <div>
            <p>First element</p>
            <p>Second element</p>
        </div>
    );
}

describe("TestComponent", () => {
    afterAll(() => {
        cleanup();
    });
    it("should contain `First element` text", () => {
        render(<TestComponent />);
        screen.getByText("First element");
    });
    it("should contain `Second element` text", () => {
        screen.getByText("Second element");
    });
});

Answer 2

一种方法是编写一个beforeAll 函数来初始化渲染。对于所有子测试，这只会初始化一次。

describe("Question Screen", () => {

    beforeAll(() => {
        render(<TriviaBox/>);
    }) 

    it("should render the first question when difficulty button is clicked", async () => {
        const btn = screen.getByRole("button", {name: /easy/i});
        fireEvent.click(btn);

        const heading = await screen.findByText("Question 1");
        expect(heading).toBeInTheDocument();
    });
    ...
});

请参阅 JEST 文档https://jestjs.io/docs/en/setup-teardown#one-time-setup