在Jest中测试含Antd的React应用时遇模块外import语句错误

问题根源 #

这个错误是因为Jest默认使用CommonJS模块规范，但Antd及其依赖（如rc-*系列组件）采用ES模块编写，你的配置里将node_modules全部排除在转译范围外，导致Jest无法识别这些ES模块的import语法。另外当前配置还存在两个关键问题：React组件测试需要jsdom环境而非node环境，Babel配置缺少React预设。

具体修复步骤 #

1. 更新jest.config.js
   修改配置，调整测试环境、转译规则，同时让Jest转译Antd相关的ES模块：

module.exports = {
  preset: "ts-jest",
  // React组件测试需要jsdom环境
  testEnvironment: "jsdom",
  transform: {
    // 同时处理ts和tsx文件
    "^.+\\.(ts|tsx)?$": "ts-jest",
  },
  // 不对Antd及其依赖的ES模块进行转译排除
  transformIgnorePatterns: [
    "/node_modules/(?!antd|@ant-design|rc-.+|@babel/runtime)"
  ],
};

2. 完善babel.config.js
   添加React与TypeScript预设，确保React组件代码能被正确转译：

module.exports = { 
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ] 
};

3. 安装缺失依赖
   如果还没安装相关Babel预设，执行以下命令：

npm install --save-dev @babel/preset-react @babel/preset-typescript

验证 #

重新运行Jest测试，应该能正常识别ES模块语法，不再抛出该错误。

内容的提问来源于stack exchange，提问作者Bilal Javed