运行JEST与Riot测试用例时遭遇Import错误求助

我知道你现在被这个SyntaxError: Unexpected token import搞头疼了——本质原因是Jest默认使用CommonJS模块系统，没法直接解析ES模块的import语法，咱们一步步来搞定它：

1. 用Babel转译ES模块 #

这是最通用的解决方案，让Jest能识别import语法：

• 先安装必要的依赖包：

  npm install --save-dev @babel/core @babel/preset-env babel-jest
  

• 在项目根目录创建或修改jest.config.js，添加转译配置：

  module.exports = {
    transform: {
      // 让babel-jest处理所有.js/.jsx文件
      '^.+\\.jsx?$': 'babel-jest',
    },
  };
  

• 再创建.babelrc文件，配置Babel的预设：

  {
    "presets": [
      ["@babel/preset-env", { "targets": { "node": "current" } }]
    ]
  }
  

2. 处理package.json的type: module设置 #

如果你的项目package.json里设置了"type": "module"（强制使用ES模块），还需要给Jest加额外配置：
修改jest.config.js，添加extensionsToTreatAsEsm字段：

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  // 告诉Jest把.js文件当作ES模块处理
  extensionsToTreatAsEsm: ['.js'],
};

3. 针对Riot.js的特殊处理 #

因为你代码里用到了Riot，要是测试涉及.riot组件文件，还得处理组件的转译：

• 安装jest-riot插件：

  npm install --save-dev jest-riot
  

• 更新jest.config.js，加入组件的转译规则：

  module.exports = {
    transform: {
      '^.+\\.riot$': 'jest-riot',
      '^.+\\.jsx?$': 'babel-jest',
    },
    // 让Jest识别.riot文件后缀
    moduleFileExtensions: ['js', 'riot'],
  };
  

4. 验证修复效果 #

做完上面的配置后，重新运行你的测试命令（比如npm test），应该就能解决这个导入语法错误了。如果还是有问题，可以检查下依赖是否安装完整，或者Jest版本是否过旧（建议使用较新版本的Jest，兼容性更好）。

内容的提问来源于stack exchange，提问作者Lakshmi Narasimhulu Gujjula