reactjs - Why getting error 'Objects are not valid as a React child' in turborepo ui tests? - Stack Overflow
I'm using node 22.12.0 LTS and npm 10.9.0
The error message I'm getting in the test is:
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.
This is my package.json
{
"name": "@repo/ui",
"version": "0.0.0",
"type": "module",
"private": true,
"exports": {
"./navigation-menu": {
"types": "./src/components/shadcn-ui/navigation-menu/navigation-menu.tsx",
"default": "./dist/navigation-menu.js"
}
},
"scripts": {
"lint": "eslint . --max-warnings 0",
"generate:component": "turbo gen react-component",
"check-types": "tsc --noEmit",
"test": "jest"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/plugin-syntax-jsx": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@jest/globals": "^29.7.0",
"@repo/eslint-config": "*",
"@repo/typescript-config": "*",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@turbo/gen": "^1.12.4",
"@types/jest": "^29.5.14",
"@types/node": "^20.11.24",
"@types/react": "18.3.0",
"@types/react-dom": "18.3.1",
"babel-jest": "^29.7.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lucide-react": "^0.469.0",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7",
"ts-jest": "^29.2.5",
"ts-node": "^10.9.2",
"typescript": "5.5.4"
},
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@radix-ui/react-avatar": "^1.1.2",
"@radix-ui/react-checkbox": "^1.1.3",
"@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-context-menu": "^2.2.4",
"@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-hover-card": "^1.1.4",
"@radix-ui/react-label": "^2.1.1",
"@radix-ui/react-menubar": "^1.1.4",
"@radix-ui/react-navigation-menu": "^1.2.3",
"@radix-ui/react-popover": "^1.1.4",
"@radix-ui/react-progress": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slider": "^1.2.2",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-toast": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.1",
"@radix-ui/react-toggle-group": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.6",
"@tanstack/react-table": "^8.20.6",
"cmdk": "^1.0.0",
"date-fns": "^3.6.0",
"embla-carousel-react": "^8.5.1",
"next-themes": "^0.4.4",
"react": "^19.0.0",
"react-day-picker": "^8.10.1",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"recharts": "^2.15.0",
"sonner": "^1.7.1",
"vaul": "^1.1.2",
"zod": "^3.24.1"
}
}
This is my tsconfig.json
{
"extends": "@repo/typescript-config/react-library.json",
"include": ["src", "jest.config.ts", "jest.setup.ts"],
"exclude": ["node_modules", "build", "dist"],
"compilerOptions": {
"target": "ES2022",
"moduleResolution": "node",
"module": "CommonJS",
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/lib/utils": ["./src/lib/utils/*"]
}
}
}
This is my jest.config.ts
// jest.config.ts
import type { JestConfigWithTsJest } from 'ts-jest';
const jestConfig: JestConfigWithTsJest = {
// [...]
preset: 'ts-jest',
testEnvironment: 'jsdom',
transform: {
// '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest`
// '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest`
'^.+\\.tsx?$': [
'ts-jest',
{
babelConfig: true,
},
],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
moduleNameMapper: {
'@/(.*)': '<rootDir>/src/$1',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};
export default jestConfig;
This is my babel.config.json
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": ["@babel/plugin-syntax-jsx"]
}
This is my test
import { render, screen } from '@testing-library/react';
import { NavigationMenuList } from './navigation-menu';
describe('NavigationMenuList', () => {
it('renders without crashing', () => {
render(<NavigationMenuList />);
});
it('applies custom className', () => {
render(<NavigationMenuList className="custom-class">Test</NavigationMenuList>);
expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
});
it('passes additional props', () => {
render(<NavigationMenuList data-testid="nav-list">Test</NavigationMenuList>);
expect(screen.getByTestId('nav-list')).toBeInTheDocument();
});
});
What am I missing, why am I getting this error and how do I get rid of it?
I'm using node 22.12.0 LTS and npm 10.9.0
The error message I'm getting in the test is:
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.
This is my package.json
{
"name": "@repo/ui",
"version": "0.0.0",
"type": "module",
"private": true,
"exports": {
"./navigation-menu": {
"types": "./src/components/shadcn-ui/navigation-menu/navigation-menu.tsx",
"default": "./dist/navigation-menu.js"
}
},
"scripts": {
"lint": "eslint . --max-warnings 0",
"generate:component": "turbo gen react-component",
"check-types": "tsc --noEmit",
"test": "jest"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/plugin-syntax-jsx": "^7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@jest/globals": "^29.7.0",
"@repo/eslint-config": "*",
"@repo/typescript-config": "*",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@turbo/gen": "^1.12.4",
"@types/jest": "^29.5.14",
"@types/node": "^20.11.24",
"@types/react": "18.3.0",
"@types/react-dom": "18.3.1",
"babel-jest": "^29.7.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lucide-react": "^0.469.0",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7",
"ts-jest": "^29.2.5",
"ts-node": "^10.9.2",
"typescript": "5.5.4"
},
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@radix-ui/react-avatar": "^1.1.2",
"@radix-ui/react-checkbox": "^1.1.3",
"@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-context-menu": "^2.2.4",
"@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-hover-card": "^1.1.4",
"@radix-ui/react-label": "^2.1.1",
"@radix-ui/react-menubar": "^1.1.4",
"@radix-ui/react-navigation-menu": "^1.2.3",
"@radix-ui/react-popover": "^1.1.4",
"@radix-ui/react-progress": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slider": "^1.2.2",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-toast": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.1",
"@radix-ui/react-toggle-group": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.6",
"@tanstack/react-table": "^8.20.6",
"cmdk": "^1.0.0",
"date-fns": "^3.6.0",
"embla-carousel-react": "^8.5.1",
"next-themes": "^0.4.4",
"react": "^19.0.0",
"react-day-picker": "^8.10.1",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"recharts": "^2.15.0",
"sonner": "^1.7.1",
"vaul": "^1.1.2",
"zod": "^3.24.1"
}
}
This is my tsconfig.json
{
"extends": "@repo/typescript-config/react-library.json",
"include": ["src", "jest.config.ts", "jest.setup.ts"],
"exclude": ["node_modules", "build", "dist"],
"compilerOptions": {
"target": "ES2022",
"moduleResolution": "node",
"module": "CommonJS",
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/lib/utils": ["./src/lib/utils/*"]
}
}
}
This is my jest.config.ts
// jest.config.ts
import type { JestConfigWithTsJest } from 'ts-jest';
const jestConfig: JestConfigWithTsJest = {
// [...]
preset: 'ts-jest',
testEnvironment: 'jsdom',
transform: {
// '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest`
// '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest`
'^.+\\.tsx?$': [
'ts-jest',
{
babelConfig: true,
},
],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
moduleNameMapper: {
'@/(.*)': '<rootDir>/src/$1',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};
export default jestConfig;
This is my babel.config.json
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": ["@babel/plugin-syntax-jsx"]
}
This is my test
import { render, screen } from '@testing-library/react';
import { NavigationMenuList } from './navigation-menu';
describe('NavigationMenuList', () => {
it('renders without crashing', () => {
render(<NavigationMenuList />);
});
it('applies custom className', () => {
render(<NavigationMenuList className="custom-class">Test</NavigationMenuList>);
expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
});
it('passes additional props', () => {
render(<NavigationMenuList data-testid="nav-list">Test</NavigationMenuList>);
expect(screen.getByTestId('nav-list')).toBeInTheDocument();
});
});
What am I missing, why am I getting this error and how do I get rid of it?
Share Improve this question asked 15 hours ago mkelley33mkelley33 5,59010 gold badges50 silver badges73 bronze badges1 Answer
Reset to default -1Error Explanation
Objects are not valid as a React child means that you are rendering something that has a prop as an object e.g.
<div>{someObject}</div>
This is not demonstrated in your code, but might be happening inside.
Example from your code
This is demonstrated in your code:
<NavigationMenuList />
But NavigationMenuList might be rendering an object e.g.
function NavigationMenuList() {
const someObj = {};
return <div>{someObj}</div>;
}
Suggestion
Look at the stack trace on the error for the render tree.
最新文章
- 互联网“一哥”百度不行了？
- 谷歌正在复制苹果模式？(图)
- reactjs - CORS issue from React to Flask - Stack Overflow
- android - Segmentation Fault at start up of Maui App - Stack Overflow
- browser cache - window.fetch not using cached data from <img src= - Stack Overflow
- excel - method range of object '_Global' failed trying to modify text - Stack Overflow
- performance testing - How to retrieve the dynamic value from the JMeter - Stack Overflow
- c# - I have a time clock connected to my local network and I have a Windows server on localweb and I can't get the clock
- C equivalent of C++ inline - Stack Overflow
- python - Unet isn't working orand i'm not using it correctly - Stack Overflow
- reactjs - can not use an id that I saved in props as default value in react select - Stack Overflow
- javascript - Why does every object in BabylonJS require a name? - Stack Overflow
- vim - Neovim - How to select autocomplete option in :e command without opening it? - Stack Overflow
- sql - How to add constraint if not exists - Stack Overflow
- amazon web services - Python boto3: download files from s3 to local only if there are differences between s3 files and local one
- perl - How to get a diagnostic from Moo when I try to set an unknown attribute in the constructor? - Stack Overflow
- arkit - Detecting and Using 2 Different Vertical Planes - Stack Overflow