React+TypeScript项目Jest报错：Cannot use import statement outside a module

问题背景 #

使用React+TypeScript开发项目，测试Header组件时编写了如下测试代码：

test("Render Header", () => {
  render(<Header />);
});

Header组件会调用actions.tsx中的异步action creator loadRepo（该方法基于axios实现）：

import { loadRepo } from "../../redux/actions";
dispatch(loadRepo());

运行测试时触发报错：Cannot use import statement outside a module，根源是actions.tsx中导入axios时，Jest无法正确解析其ES模块语法。

已配置的文件内容如下：

babel.config.js #

module.exports = {
  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
  plugins: [],
};

jest.config.js #

module.exports = {
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
  },
};

package.json #

"dependencies": {
    "@testing-library/user-event": "^13.5.0",
    "@types/node": "^16.18.23",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "axios": "^1.3.5",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.3",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "babel-jest": "^29.5.0",
    "jest": "^27.5.1"
  }

解决方案 #

1. 调整Jest配置，兼容axios的ES模块 #

修改jest.config.js，让Jest正确转译axios模块：

module.exports = {
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    'axios': require.resolve('axios')
  },
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  transformIgnorePatterns: [
    "/node_modules/(?!axios)/"
  ]
};

2. 模拟异步Action Creator，避免实际调用axios #

组件渲染测试无需发起真实请求，直接模拟loadRepo方法即可：

import { loadRepo } from "../../redux/actions";
// 模拟整个actions模块
jest.mock("../../redux/actions", () => ({
  loadRepo: jest.fn()
}));

test("Render Header", () => {
  render(<Header />);
  // 可选：验证loadRepo是否被调用
  expect(loadRepo).toHaveBeenCalled();
});

3. 修复依赖版本冲突 #

react-scripts 5.0.1自带Jest 27，但你手动安装了babel-jest 29.5.0，版本不匹配会导致转译异常：

• 执行命令删除冲突依赖：

npm uninstall jest babel-jest

• 依赖react-scripts自带的测试工具，确保Babel配置与react-scripts兼容

4. 确认Babel配置有效性 #

保持babel.config.js的preset配置正确，确保针对Node环境转译：

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  plugins: []
};

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