Testing in React

Starting in React 18, the render function is asynchronous: the function call will return before React has modified the DOM.

It means, that our test framework should wait with assertions before React finishes its rendering.

React provides a helper function for our tests that pauses until asynchronous rendering has completed. It’s called act and you simply need to wrap it around any React API calls.

import { act } from "react-dom/test-utils";
 
...
act(() =>
  ReactDOM.createRoot(container).render(component)
);
...