使用Jest对Ionic服务进行单元测试：ES6语法导入错误排查

我之前在Ionic Angular项目中配置Jest时也碰到过一模一样的错误，核心原因是Jest默认不会转换node_modules目录下的文件，而@ionic/storage发布的dist文件使用了ES模块语法（也就是你看到的import关键字），Jest无法直接解析这种语法。下面是完整的解决步骤：

1. 安装必要的Babel依赖 #

首先需要安装Babel相关工具，用来将ES模块转换为Jest能识别的CommonJS格式：

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

2. 配置Babel转换规则 #

在项目根目录创建babel.config.js文件，添加以下配置：

module.exports = {
  presets: [
    // 针对当前Node版本优化转换规则
    ['@babel/preset-env', { targets: { node: 'current' } }],
    // 处理TypeScript语法
    '@babel/preset-typescript'
  ]
};

3. 修改Jest配置文件 #

打开你的jest.config.js（如果没有就新建一个），重点调整transform和transformIgnorePatterns配置：

module.exports = {
  // 如果你用了Ionic Angular的Jest预设，保留这一行
  preset: 'jest-preset-angular',
  // 用babel-jest处理所有.ts和.js文件
  transform: {
    '^.+\\.(ts|js)$': 'babel-jest'
  },
  // 告诉Jest不要忽略@ionic/storage等需要转换的包
  transformIgnorePatterns: [
    'node_modules/(?!(@ionic/storage|@ionic/angular|@angular/*))'
  ],
  // 指定Jest识别的文件扩展名
  moduleFileExtensions: ['ts', 'js', 'html'],
  // 如果有Jest初始化文件（比如配置测试环境），保留这一行
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts']
};

关键说明： #

transformIgnorePatterns里的(?!(...))是反向匹配，意思是除了括号里列出的包，其他node_modules文件都不转换。我们把@ionic/storage加进去，Jest就会用Babel去转换它的代码，解决Unexpected token import错误。

4. 验证配置 #

现在你可以运行你的单元测试命令（比如npm run test），应该就能正常执行了。如果还有其他类似的ES模块语法错误，只需要把对应的包添加到transformIgnorePatterns的反向匹配列表里就行。

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