CODEWITHSUNDEEP
reactjsunit-testingjestjsreact-testing-library
Null Head
Null Head

Reputation: 2941

React Testing Library: Why does the order of the tests matter?

Here's a link to codesanbox

Reordering the below tests would make find one after the other test to pass.

Another way to make it pass would be to make should be able to find 3 directly test to pass, for example, by making it find 2 instead of 3.

describe("Counter", () => {
  test("should be able to find 3 directly", async () => {
    render(<Counter />);

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

  test("find one after the other", async () => {
    render(<Counter />);

    const one = await waitFor(() => screen.findByText(/1/i));
    expect(one).toBeInTheDocument();

    const two = await waitFor(() => screen.findByText(/2/i));
    expect(two).toBeInTheDocument();

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });
});

So the question is, why does the order of the tests matter? Why is the clean up not working?

Upvotes: 0

Views: 1075

Answers (1)

tmhao2005
tmhao2005

Reputation: 17514

It looks like waitFor has reach its timeout as waiting for the counter to 3 which means it is unrelated to ordering in this case I guess.

You would fix by increase the timeout to wait your counter as following:

test("should be able to find 3 directly", async () => {
  render(<Counter />);

  const three = await waitFor(() => screen.findByText(/3/i), {
    timeout: 3e3, // 3s wait would find 3
  });

  expect(three).toBeInTheDocument();
});

Upvotes: 1

Related Questions