TS Jest报错“Cannot use import statement outside module”的配置方案

1. 调整Jest配置转译ES模块第三方库 #

问题核心是Jest默认不会转译node_modules中的ES模块，而axios当前以ES模块格式输出，导致测试时无法识别import语句。修改jest.config.js，指定转译规则并允许转译axios：

/** @type {import('jest').Config} */
const config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  // 配置TS/TSX用ts-jest转译，JS/JSX用babel-jest转译
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  // 排除不需要转译的库，例外放行axios等ES模块库
  transformIgnorePatterns: [
    '/node_modules/(?!axios|@testing-library)',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
};

module.exports = config;

2. 配置Babel支持ES模块转译 #

如果项目未配置Babel，需要创建babel.config.json并安装依赖：

安装依赖 #

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

创建babel.config.json #

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

3. 处理package.json的模块类型冲突 #

如果你的package.json中存在"type": "module"，会让Jest以ES模块模式运行，需要给ts-jest添加ES模块适配配置：

// 在jest.config.js中新增
extensionsToTreatAsEsm: ['.ts', '.tsx'],
globals: {
  'ts-jest': {
    useESM: true,
  },
},

若不需要全局ES模块模式，可直接移除package.json中的"type": "module"。

4. 升级axios到稳定版 #

旧版axios可能存在模块格式兼容问题，执行升级命令：

npm update axios

验证测试 #

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

npm test

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