What is the common "act(...) warning", why does it appear, and how should you fix it?

Short answer

It appears when a component state update happens outside act(), usually because an asynchronous operation (Promise or Timer) finishes after the test has stopped checking.

Explanation

React's act() ensures all state updates, DOM renders, and Effects run before assertions proceed. The warning appears when background asynchronous code calls setState without the test waiting for it. Do not solve this by wrapping every line manually in act(); use the right waiting APIs, such as findBy or waitFor.

Code example

// Wrong: validate immediately before awaiting the asynchronous request
// fireEvent.click(submitBtn);
// expect(screen.getByText('Saved')).toBeInTheDocument(); // will trigger a warning act

// Correct: wait for the asynchronous result to appear
await user.click(submitBtn);
await expect(screen.findByText('Saved')).resolves.toBeInTheDocument();

Common mistakes

• Hiding the act warning by wrapping arbitrary calls in act() instead of waiting for the pending Promise.

Follow-up questions

• How do you test a Custom Hook separately with RTL's renderHook?

Sources

• React docs — act