CodePark/ questions / Async UI & act()
START PRACTICINGPRACTICE
Frontend question · Testing › Async UI & act()

Which waitFor usage follows the Testing Library recommendations?

// A
await waitFor(() => {});
expect(screen.getByText("Done")).toBeInTheDocument();

// B
await waitFor(() => {
  expect(fetchMock).toHaveBeenCalledTimes(1);
  expect(screen.getByText("Done")).toBeInTheDocument();
});

// C
await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1));
expect(screen.getByText("Done")).toBeInTheDocument();
C

C is right: one assertion inside waitFor, then the rest outside it. A is wrong. An empty callback passes on the first try, so it waits for a random moment and is flaky. B is wrong too. With several assertions in one callback, a failure in the first one is retried until the timeout. That hides which part failed.