React Testing Library "not wrapped in act(...)" Warning Fails CI
React warns that a component state update happened outside act(...). The update fired after the assertion - an async effect or unawaited user event resolved late - so the test observed a half-updated tree, and in CI the warning often fails the run.
What this error means
Console fills with "Warning: An update to <Component> inside a test was not wrapped in act(...)." In CI, where warnings are often promoted to errors, this fails the test even though the assertion itself might pass.
Warning: An update to UserCard inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped
into act(...):
at UserCard (src/UserCard.tsx:12:3)Common causes
Async state update after the test finished
An effect or pending promise resolves and updates state after the synchronous assertions ran. The update lands outside act, triggering the warning.
User events not awaited
Modern @testing-library/user-event is async. Not awaiting userEvent.click(...) lets the resulting state update escape act.
How to fix it
Await user events and async queries
Awaiting userEvent and findBy*/waitFor flushes updates inside act for you - you rarely need to call act directly.
const user = userEvent.setup();
await user.click(screen.getByRole('button', { name: 'Load' }));
expect(await screen.findByText('Loaded')).toBeInTheDocument();Wait for the pending update to settle
await waitFor(() => {
expect(screen.getByText('Done')).toBeInTheDocument();
});How to prevent it
- Always
awaituserEventinteractions andfindBy*/waitFor. - Avoid asserting before async effects have flushed.
- Mock timers/network so updates resolve deterministically within the test.