How do i use a single render across multiple tests in React Testing Library.?

Question

Is it possible to maintain the same render() across multiple tests in using Jest and React Testing Library? I am building a Trivia App and have a single component that displays different questions as the user progresses through the quiz. In order to test the functionality of the choice buttons, the submit button, and checking that the right screens are displayed at the right time, I need to perform tests on the same rendered component at different stages of the quiz. For instance:

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);
        ...
    });
});

Is there a way to preserve the same render from the first test for use in the second test, rather than having to re-render the same component and step through the first question again in order to test the second question?

Answer 1

Basically what you need is to disable auto cleanup because it unmounts React trees after each test. See docs: https://testing-library.com/docs/react-testing-library/setup/#skipping-auto-cleanup. But in this case you should care about calling cleanup manually to not compromise next tests.

Here is a small working example of how to do this with importing "@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");
    });
});