Closed
Description
@testing-library/react
version: 14.0.0- Testing Framework and version: jest
- DOM Environment:
Relevant code or config:
// Example.tsx
const Example = () => null;
export default Example;
// Example.test.tsx
import { lazy } from "react";
import { render } from "@testing-library/react";
const Component = () => {
const Example = lazy(() => import("./Example"));
return <Example />;
};
describe("Example", () => {
test(`Renders`, () => {
expect(() => {
render(<Component />);
}).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:
Warning starts to appear after upgrading to React 18.
Suggested solution:
No warning message
Activity
mathieucaroff commentedon May 3, 2023
I also do have
act()
warning issues when using dynamic file import.eps1lon commentedon May 19, 2023
You want to use
waitFor
to wait for the lazy component to appear. We should document this.MatanBobi commentedon May 21, 2023
@eps1lon maybe transfer this one to the docs repo after @atshakil verifies that's the case?
[-]Receiving 'event was not wrapped in act' warning after upgrading to React 18[/-][+]Document "How to test React.lazy"[/+]atshakil commentedon May 23, 2023
It's great that you're considering a documentation on using
waitFor
for lazy component.Since this issue is moved to docs repo, renamed and now serving to create a documentation on lazy component testing, I am creating a separate issue on react-testing-library repo to address the act warning for dependents of a shared component using lazy (I believe it's a different concern entirely).