Jest运行React测试时报React.createElement类型无效告警但测试通过求解

问题根因 #

你遇到的告警是Jest运行时导入的PiggyBankOutline实际值为undefined导致的，生产运行正常是因为打包工具（比如Webpack、Vite）的模块加载逻辑和Jest不同，不会触发模块加载顺序、别名映射、大小写敏感类的问题。

解决方案按优先级依次尝试： #

1. 清空Jest缓存后重试
   Jest默认会对已加载的模块做持久化缓存，修改导入路径、配置后不清理缓存会一直复用旧的加载结果。运行以下命令清除缓存后再跑测试：

jest --clearCache

2. 修改顶层Icons对象的初始化逻辑
   你现在是在模块顶层直接将图标组件实例化成JSX存入对象，Jest加载模块的顺序和生产环境不同，可能出现导入的图标组件还未完成导出就被调用的情况。改成调用时再实例化的逻辑即可：

// 原来的Icons对象删除，替换为以下逻辑
const IconMap: { [key: string]: React.ComponentType } = {
  cards: CreditCard,
  default: PiggyBankOutline,
  investments: BarChart,
  loans: DollarStack,
  savings: PiggyBankOutline,
};

// 需要使用图标的地方调用该方法获取对应JSX
const getIcon = (type: string) => {
  const TargetIcon = IconMap[type] || IconMap.default;
  return <TargetIcon />;
};

3. 检查Jest的别名映射配置
   确认jest.config.js中的moduleNameMapper字段正确配置了assets别名的映射，和你项目tsconfig.json里的paths配置保持一致，示例配置：

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^assets/(.*)$': '<rootDir>/src/assets/$1',
    // 其他别名配置
  },
  // 其余配置
}

同时检查导入路径和实际文件路径的大小写是否完全一致，Jest在Linux/Mac环境下对路径大小写敏感，打包工具默认忽略大小写，会出现运行正常测试报错的情况。
4. 检查不必要的模块mock
查看测试文件、Jest全局setup文件中有没有对assets目录的全局mock，比如存在jest.mock('assets')代码但没有配置具体返回值，会导致所有从assets导入的内容都是undefined，要么补全mock的返回值，要么删除无意义的mock即可。

内容的提问来源于stack exchange，提问作者Cristian Flórez