Open
Description
Description:
Integrating vitest with a fresh nextJS application results in the following error:
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.
❯ throwOnInvalidObjectType ../../node_modules/react-dom/cjs/react-dom.development.js:13123:9
❯ reconcileChildFibers ../../node_modules/react-dom/cjs/react-dom.development.js:14064:7
❯ reconcileChildren ../../node_modules/react-dom/cjs/react-dom.development.js:19193:28
❯ updateHostRoot ../../node_modules/react-dom/cjs/react-dom.development.js:19912:5
❯ beginWork ../../node_modules/react-dom/cjs/react-dom.development.js:21654:14
❯ beginWork$1 ../../node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork ../../node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync ../../node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync ../../node_modules/react-dom/cjs/react-dom.development.js:26473:7
❯ performConcurrentWorkOnRoot ../../node_modules/react-dom/cjs/react-dom.development.js:25777:74
This uses React 19.
If I downgrade to React 18 it works:
Working Screenshot:
Working package.json
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"check-types": "tsc --noEmit",
"test": "vitest run",
"test:coverage": "vitest run --coverage",
"test:watch": "vitest run --watch"
},
"dependencies": {
"next": "15.2.3",
"react": "18.3.1",
"react-dom": "18.3.1"
},
"devDependencies": {
...
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.1",
...
"vitest": "^3.0.9",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.2.0",
"@testing-library/react-native": "^13.2.0",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
}
}
Metadata
Metadata
Assignees
Labels
No labels