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]

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

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.

[kolorfilm]

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.

[eps1lon]

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]

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]

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!