Test initial rendering
A test renders a component and needs to assert its initial DOM output after React has committed the render.
React 19+ · Function
act
act is a test helper that flushes React updates caused by rendering and interactions before assertions. Use its asynchronous form to make test behavior closer to React in the browser.
- Since
- 19.0.0
How it works
Use the async act helper around component rendering and interactions in tests. React queues updates triggered inside the callback, flushes them—including updates across async boundaries—and applies the resulting changes before assertions.
Syntax
await act(async actFn)Parameters
| Name | Type | Description |
|---|---|---|
async actFn | function | An async function wrapping renders or interactions for components being tested. Updates it triggers are queued and flushed together; asynchronous boundaries are also processed. |
Returns
Nothing.
Key points
- Use act to ensure pending React work is applied before checking a component's result.
- Place both rendering and the interaction that changes state inside one awaited act call.
- It improves fidelity by making test update timing more like browser execution.
- React batches callback-triggered updates in an internal queue, then flushes them together onto the DOM.
- After act completes, assert the component output produced by the tested interaction.
- Event dispatch belongs inside act when the test is verifying its resulting UI changes.
Common mistakes
- Prefer the asynchronous form: await act(async () => { ... }); rather than relying on a synchronous callback.
- Configure the test environment with global.IS_REACT_ACT_ENVIRONMENT=true before using act.
Example: Flush a render and interaction before asserting
import { act } from 'react';
import { createRoot } from 'react-dom/client';
const container = document.createElement('div');
const root = createRoot(container);
function Counter() {
return <button onClick={() => root.render(<p>Updated</p>)}>Update</button>;
}
await act(async () => {
root.render(<Counter />);
container.querySelector('button').click();
});
console.assert(container.textContent === 'Updated');Wrap rendering and interactions in async act so React processes their updates before the assertion.
When to use it
Test event-driven updates
A test dispatches a click or other interaction and checks the resulting UI.
Test asynchronous updates
A component schedules work across an asynchronous boundary that must settle before assertions.
Interview questions
QWhat problem does act solve?
act is a test helper that flushes React updates caused by a unit of interaction before assertions. Wrapping rendering or an event in await act(async () => { ... }) makes the test closer to browser behavior.
Follow-up: Why should the callback be asynchronous? It lets React process code that crosses an async boundary and flush scheduled updates before the test continues.
QWhat belongs inside act's callback?
The callback receives no required arguments and should contain the render or interaction being tested. Updates triggered inside it enter an internal queue that React flushes together.
Follow-up: What kinds of work belong inside the callback? Rendering, user-event handling, and other updates whose resulting DOM state the test will assert.
QWhat does act return?
act returns nothing. Its purpose is synchronization: after the awaited call completes, the updates caused by the callback have been processed and applied to the DOM.
Follow-up: What environment setting may be required? Set global.IS_REACT_ACT_ENVIRONMENT=true so act is enabled for the test environment.
Related
react-dom/test-utils.act@testing-library/reactReactDOMTestUtils.act