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.] #1371
Description
@testing-library/reactversion: 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.]