Jest测试React组件时React.forwardRef等属性报undefined是什么原因？

异常行为的核心成因 #

模块系统的环境差异 #

浏览器端的构建工具（Webpack、Vite、Rollup等）默认开启了ES Module与CommonJS的互兼容处理：当你使用默认导入语法import React from 'react'、import PropTypes from 'prop-types'时，打包工具会自动把包的所有命名导出属性合并到默认导出对象上，因此React.forwardRef、PropTypes.oneOf这类写法可以正常访问。

Jest 26默认使用Node.js原生的CommonJS模块加载逻辑，未开启完整的ESM-CJS互操作适配，而多数第三方包的CommonJS导出结构与ESM导出结构本身就存在差异：

• 若你使用React 17+的自动JSX转换（无需显式导入React即可编写JSX语法），Jest运行时不会自动注入完整的React默认导出对象，直接访问React.forwardRef就会触发属性读取失败的错误
• prop-types包的CommonJS导出并未将oneOf、bool这类验证器挂载到默认导出对象上，仅能通过命名导入的方式访问对应API

配置不同步的影响 #

如果你的tsconfig.json或者Babel配置中的esModuleInterop、allowSyntheticDefaultImports参数仅在生产/开发构建环节生效，没有同步到Jest的编译配置中，也会导致Jest加载的模块结构和浏览器端打包后的结构不一致，触发上述错误。

无需修改业务代码的替代解决方案 #

你也可以不调整组件代码写法，通过对齐配置解决问题：

1. 确保tsconfig.json中esModuleInterop和allowSyntheticDefaultImports均设置为true，且Jest的ts-jest配置项明确继承该tsconfig
2. 若使用Babel编译，确保Jest环境下@babel/preset-env的modules参数设置为commonjs，同时开启ES模块转CommonJS的互兼容配置

内容的提问来源于stack exchange，提问作者Scratch'N'Purr