Description
@testing-library/reactversion: 14.0.0- Testing Framework and version: jest
- DOM Environment:
Relevant code or config:
// CompA.tsx
const CompA = () => null;
export default CompA;
// CompB.tsx
import { lazy } from "react";
const CompB = () => {
const Example = lazy(() => import("./CompA"));
return <Example />;
};
export default CompB;
// CompC.tsx
import CompB from './CompB';
const CompC = () => <CompB />;
export default CompC;
// CompC.test.tsx
import { render } from "@testing-library/react";
import CompC from './CompC';
// This test will throw `act()` warning even though CompC is not using `lazy` directly.
describe("CompC", () => {
test(`Renders`, () => {
expect(() => {
render(<CompC />);
}).not.toThrow();
});
});What you did:
Run test using yarn test from a CRA configured project.
What happened:
Receiving warning,
console.error
Warning: A suspended resource finished loading inside a test, but the event was not wrapped in act(...).
When testing, code that resolves suspended data should be wrapped into act(...):
act(() => {
/* finish loading suspended data */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
Reproduction:
Problem description:
act() warning started to appear after upgrading to React 18.
Wrapping with waitFor approach (as suggested here) has the following drawback.
Considering lazy is used on a shared component, we'll have to update all the tests for all the components that are using the shared component (even though those components are not using lazy directly). For a large codebase, we'll have to update tests for hundreds of components. Even if we have only one shared component using lazy, we'll have to update all the dependent component tests.
Seems like a lot of work!
Could we somehow keep the behavior identical to that on React 16 (act warning is not raised without needing waitFor)? It'll save a lot of developer effort.
Suggested solution:
No warning message