MENU


Multiple Renderers

(See React's archived Testing Recipes: Multiple Renderers.)

In rare cases, you may be running a test on a component that uses multiple renderers. For example, you may be running snapshot tests on a component with react-test-renderer, that internally uses ReactDOM's createRoot().render() inside a child component to render some content directly into the DOM. In this scenario, you can wrap updates with act()s corresponding to their renderers.


import { act as domAct } from "react";
import { act as testAct, create } from "react-test-renderer";

// ...
let root;
domAct(() => {
  testAct(() => {
    root = create(<App />);
  });
});
expect(root).toMatchSnapshot();