testing-library/react-testing-library

Tests fail with React 19 | Error: Uncaught [Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.]

kolorfilm opened this issue · 5 comments

kolorfilm commented
  • @testing-library/react version: 16.1.0
  • Testing Framework and version:
  • DOM Environment: 
System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 118.94 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /opt/homebrew/opt/node@22/bin/node
    npm: 10.9.0 - /opt/homebrew/opt/node@22/bin/npm
    pnpm: 9.15.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.109
    Safari: 18.1.1
  npmPackages:
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    @eslint/js: ^9.16.0 => 9.16.0 
    @types/jest: ^29.5.14 => 29.5.14 
    @types/node: ^22.10.1 => 22.10.1 
    concurrently: ^9.1.0 => 9.1.0 
    eslint: ^9.16.0 => 9.16.0 
    eslint-config-prettier: ^9.1.0 => 9.1.0 
    eslint-plugin-cypress: ^4.1.0 => 4.1.0 
    eslint-plugin-import: ^2.31.0 => 2.31.0 
    eslint-plugin-jest: ^28.9.0 => 28.9.0 
    eslint-plugin-prettier: ^5.2.1 => 5.2.1 
    eslint-plugin-react-hooks: ^5.1.0 => 5.1.0 
    git-format-staged: ^3.1.1 => 3.1.1 
    globals: ^15.13.0 => 15.13.0 
    jest: ^29.7.0 => 29.7.0 
    jest-canvas-mock: ^2.5.2 => 2.5.2 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    prettier: ^3.4.2 => 3.4.2 
    serve: ^14.2.4 => 14.2.4 
    ts-jest: ^29.2.5 => 29.2.5 
    typescript: ^5.7.2 => 5.7.2 
    typescript-eslint: ^8.17.0 => 8.17.0 
    wait-on: ^8.0.1 => 8.0.1

Relevant code or config:

test + component:

describe('When Loading component is rendered', () => {
  it('Then it matches snapshot', () => {
    const { asFragment } = render(<Loading />);

    expect(asFragment()).toMatchSnapshot();
  });
});

export const Loading = () => {
  const { t } = useTranslation();

  return (
    <div className={styles.loading} data-testid="loading">
      <LoadingImage className={styles.loadingImage} />
      <h1>{t('default-loading-text')}</h1>
      <div className={styles.loadingHint}>
        <LoadingSpinner className={styles.loadingSpinner} />
        <h2>{t('photo-capture.loading-text')}</h2>
      </div>
    </div>
  );
};

What you did:

Run the test with jest and get the error after updating to React 19.

What happened:

Get the error:

console.error
Error: Uncaught [Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.]

Reproduction:

Problem description:

Suggested solution:

eps1lon commented

You're likely using a 3rd party dependency that inlined the JSX runtime.

Please reduce the issue to as little code as possible. Remove every source code and dependency until the issue no longer reproduces.

  • 👀1
kolorfilm commented

Hm ok. Now I only have these deps:

  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
    "@types/jest": "^29.5.14",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.2.5",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.17.0",
    "@swc/core": "^1.9.3",
    "@swc/jest": "^0.2.37",
    "@testing-library/react": "^16.1.0"
  },

But still get this error with a simple component:

export const LoadingSpinner = () => (
  <div></div>
);

describe('When LoadingSpinner is rendered', () => {
  it('Then it matches snapshot', () => {
    const { asFragment } = render(<LoadingSpinner />);

    expect(asFragment()).toMatchSnapshot();
  });
});

It still fails with the same error. When I directly put the <div></div> within the render of the test it works.

  • 👍3
eps1lon commented

Then the issue is with LoadingSpinner. try to identify which specific Component in there returns the bad JSX. Probably a 3rd party dependency that inline the JSX runtime.

raualvron commented

I was facing the same issue and it was a 3rd party dependency which required React 19 and it was returning bad JSX as @eps1lon mentioned.

kolorfilm commented

It is fixed for me. It seems the related dependency was updates as well. Wasn't able to find the wrong one before.

Thanks guys for your feedback!

  • 👍1