Document "How to test React.lazy"

[atshakil]

• @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:

Sandbox: https://codesandbox.io/p/sandbox/demo-act-warning-nq3v9h?file=%2Fsrc%2FExample.test.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A1%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A1%7D%5D

Problem description:

Warning starts to appear after upgrading to React 18.

Suggested solution:

No warning message

[mathieucaroff]

I also do have act() warning issues when using dynamic file import.

[eps1lon]

You want to use waitFor to wait for the lazy component to appear. We should document this.

[MatanBobi]

@eps1lon maybe transfer this one to the docs repo after @atshakil verifies that's the case?

[atshakil]

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).