使用Jest和React Testing Library测试含React.Children组件时遇undefined错误

问题分析 #

错误TypeError: Cannot read properties of undefined (reading 'Children')说明组件渲染时React对象为undefined——即便你已经在组件中导入了React。这通常是测试环境的模块解析、Babel/TS配置，或是React自动导入的设置问题导致的。

解决方案 #

1. 确认React自动导入的Babel配置（React 17+） #

React 17及以上版本支持无需手动导入React的JSX转换，但需要Babel配置开启自动运行时：
在babel.config.json或.babelrc中修改配置：

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

如果是Create React App项目，默认已配置该选项，但自定义Babel配置时需确保此设置存在。

2. 修复组件的React导入方式 #

若自动导入配置异常，或使用React 16及以下版本，需确保组件完整导入React对象，避免tree-shaking误删静态属性：
将组件中的导入改为：

import * as React from 'react';

代替import React from 'react';，确保React.Children这类静态属性不会被优化移除。

3. 检查Jest的模块映射配置 #

确保Jest能正确解析React模块，在jest.config.js中添加或修改：

module.exports = {
  moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/react',
    '^react-dom$': '<rootDir>/node_modules/react-dom'
  }
};

强制Jest从正确路径加载React，避免模块解析错误。

4. 验证依赖版本匹配 #

确保所有相关依赖版本兼容，执行以下命令重新安装依赖（根据包管理器选择）：

# npm
npm install react react-dom @testing-library/react jest --save-dev

# yarn
yarn add react react-dom @testing-library/react jest --dev

避免因版本不匹配导致模块加载异常。

5. 检查TypeScript配置（若使用TS） #

如果是TypeScript项目，确保tsconfig.json中的JSX设置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx" // React 17+ 推荐，或"react"（React 16及以下）
  }
}

错误的JSX配置会导致编译时无法正确处理React导入。

内容的提问来源于stack exchange，提问作者Emilio Faria