使用Jest运行测试用例时出现Unexpected token import错误求助

这个错误是因为Jest默认基于Node.js的CommonJS模块系统运行，它本身不支持ES标准的动态import()语法——而你的代码（或者依赖的react-ace库）里正好用了这个语法，导致测试时解析失败。下面是几种靠谱的解决方法，按推荐程度排序：

方法1：用babel-plugin-dynamic-import-node转译动态import（推荐） #

这个插件会在测试环境下把动态import()转换成Node.js支持的require()，完美适配Jest的运行环境：

1. 安装插件

npm install --save-dev babel-plugin-dynamic-import-node

2. 修改你的Babel配置文件（比如babel.config.js或.babelrc），给测试环境单独添加这个插件：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

3. 确保你的Jest配置（jest.config.js）里已经启用了babel转译：

module.exports = {
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  // 其他Jest配置项...
};

方法2：配置Babel支持动态import语法 #

如果不想用专门的转换插件，也可以通过Babel的基础配置让它识别动态import：

1. 安装必要的插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 修改Babel配置：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3. 同样要确保Jest的transform配置正确指向babel-jest，和方法1的第三步一致。

方法3：让Jest转译react-ace库（如果是第三方库的问题） #

如果动态import是来自react-ace本身（而非你的代码），那可能是因为这个库发布的是未转译的ES代码，而Jest默认不会转译node_modules里的文件。这时需要修改Jest配置，让它转译react-ace：

在jest.config.js里添加：

module.exports = {
  // ...其他配置
  transformIgnorePatterns: [
    "/node_modules/(?!react-ace)/"
  ]
};

这个配置的意思是：除了react-ace之外，其他node_modules里的文件都跳过转译。

试完上面的方法，重新运行Jest测试，应该就能解决这个语法错误了。

内容的提问来源于stack exchange，提问作者Amala James