为什么在 Turborepo ui 测试中出现错误“对象作为 React 子对象无效”？

Question

我正在使用节点 22.12.0 LTS 和 npm 10.9.0

我在测试中收到的错误消息是：

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.

这是我的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"
  }
}

这是我的 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/*"]
    }
  }
}

这是我的 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;

这是我的 babel.config.json

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-syntax-jsx"]
}

这是我的测试

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();
  });
});

我错过了什么，为什么会出现此错误以及如何消除它？

Answer 1

错误说明

Objects are not valid as a React child

表示您正在渲染具有道具作为对象的东西，例如

<div>{someObject}</div>

这没有在您的代码中演示，但可能会在内部发生。

您的代码示例

这在您的代码中得到了证明：

<NavigationMenuList />

但是

NavigationMenuList

可能正在渲染一个对象，例如

function NavigationMenuList() {
   const someObj = {};
   return <div>{someObj}</div>;
}

建议

查看渲染树错误的堆栈跟踪。