testing-library/react-testing-library

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

Opened this issue · 6 comments

jay-linumlabs commented

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:

Image

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 commented

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

bramski commented

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

bramski commented

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.

  • 👍2
aralroca commented

Any workaround to work with React 19 for this?

trdp30 commented

@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 commented

@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.