React+Antd从es目录导入组件写测试用例遇模块导入语法错误

我明白你为了缩小打包体积，手动从Antd的es文件夹导入组件的思路，但测试时碰到的SyntaxError: Cannot use import statement outside a module确实是ES模块在CommonJS测试环境下的常见问题，给你几个可行的解决方向：

1. 让测试框架（比如Jest）转译Antd的ES模块 #

如果你的测试用Jest运行，默认它会忽略node_modules下文件的转译，但Antd的es目录里是未转译的ES模块语法，所以需要调整Jest配置：

• 在jest.config.js里修改transform和transformIgnorePatterns，让Jest转译antd/es下的文件：

  module.exports = {
    transform: {
      '^.+\\.(js|jsx)$': 'babel-jest',
      // 确保Antd的ES模块被babel-jest处理
      '^antd/es/.+\\.(js|jsx)$': 'babel-jest'
    },
    transformIgnorePatterns: [
      // 排除antd/es，不让Jest跳过它的转译
      '/node_modules/(?!antd/es/)'
    ]
  };
  

• 同时确保你的Babel配置（.babelrc或babel.config.js）包含@babel/preset-env和@babel/preset-react，保证能把ES模块转成CommonJS语法适配测试环境。

2. 改用babel-plugin-import自动按需导入 #

其实不用手动写import Modal from 'antd/es/modal'，babel-plugin-import可以帮你自动完成这个转换，还能按需引入样式，而且完全不会有测试环境的语法问题：

• 先安装插件：npm install babel-plugin-import --save-dev
• 在Babel配置里添加插件：

  // babel.config.js
  module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
      ['import', {
        libraryName: 'antd',
        libraryDirectory: 'es', // 指定从es目录导入
        style: 'css' // 按需引入css，想自定义样式可以设为true引入less
      }]
    ]
  };
  

之后你就可以像平时一样写import { Modal } from 'antd'，插件会自动转换成从es目录导入的形式，既实现了体积优化，又避免了测试时的模块语法错误，一举两得。

3. 调整测试文件的模块类型 #

如果是Node.js环境的测试，你可以尝试在package.json里添加"type": "module"，让Node默认以ES模块方式处理文件，但这可能会影响项目里其他CommonJS模块的导入，需要你检查项目里的其他依赖是否兼容ES模块。或者给测试文件改成.mjs后缀，但这种方式比较零散，不推荐大规模使用。

内容的提问来源于stack exchange，提问作者Niki Trivedi