Error: Objects are not valid as a React child ...

[jay-linumlabs]

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",
  }
}

[MatanBobi]

Can you please share a minimal reproduction for us to help?

[bramski]

I'm also getting this... any updates to make this work?

[bramski]

Okay. I managed to fix this. Downgrading react doesn't work since react is now bundled with nextjs and it's using it's own internal react. So you can either try and point the react plugin for vitejs at the development version of react inside of nextjs, OR simply remove your project's dependencies on react and react-dom. The latter was much simpler for me.

[aralroca]

Any workaround to work with React 19 for this?

[trdp30]

@jay-linumlabs Have you found any workaround for this? I assume it is not a react-testing-library alone issue, React cannot be soo not backward incompatible. If my assumptions are correct, then what configuration are we doing wrong?

[jay-linumlabs]

@jay-linumlabs Have you found any workaround for this? I assume it is not a react-testing-library alone issue, React cannot be soo not backward incompatible. If my assumptions are correct, then what configuration are we doing wrong?

I ended up not using vitest so I can move forward. I'm not sure if any recent changes or updates have resolved this issue. @bramski has a suggestion that could possibly work, but I have not tried it out.