Create React App TypeScript项目Jest测试拦截器报错求助

核心原因 #

你的Interceptor文件或其依赖模块使用了未转译的ES6语法（如import/export），而Jest运行在Node.js的CommonJS环境中，无法直接识别这类语法，从而触发报错。

具体解决方法 #

1. 调整Jest的转译忽略规则 #

CRA默认会跳过node_modules目录的转译，但如果你的Interceptor依赖的第三方包是ES6模块格式，需要将其加入转译白名单：

• 在jest.config.js中修改transformIgnorePatterns配置：

module.exports = {
  // 其他原有配置...
  transformIgnorePatterns: [
    'node_modules/(?!(需转译的包名|多个包用竖线分隔)/)'
  ],
};

• 若使用CRA默认的jest配置（写在package.json的jest字段），同样添加该规则：

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(需转译的包名)/)"
    ]
  }
}

2. 适配测试环境的Babel配置 #

检查你的.babelrc或babel.config.json，确保包含测试所需的预设：

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

该配置会在测试环境下，将代码转译为当前Node.js版本支持的语法，确保Jest能正常解析。

3. 验证Interceptor文件的TS配置 #

确认tsconfig.json的配置不影响转译流程：

• 保证compilerOptions.target设置为ES6或更高（Jest会通过Babel再转译为CommonJS，无需降到ES5）；
• compilerOptions.module字段建议保持ESNext或CommonJS，不影响测试运行。

4. 确保Interceptor被Jest转译处理 #

如果Interceptor是自定义文件，需确认Jest的转译规则覆盖了它：

• 在jest.config.js中补充或确认transform配置：

module.exports = {
  // 其他原有配置...
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
};

测试验证 #

修改配置后，重新运行测试命令：

npm test

若仍报错，检查报错信息中指定的具体文件，确认该文件已被加入转译范围。

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