CRA+TS React应用Jest报错：Cannot use import statement outside a module

看起来你的问题核心是在Jest测试中导入Axios时触发错误，而且因为多次尝试不同方案，配置文件变得冗余且可能存在冲突。结合你的技术栈（Create React App + TypeScript + Jest），我来帮你一步步梳理问题并修复：

1. 核心冲突点分析 #

首先，你的配置存在几个关键矛盾：

• CRA自带Jest配置 vs 自定义jest.config.ts：你在package.json的scripts中使用react-scripts test启动测试，这会优先使用CRA内置的Jest配置，手动添加的jest.config.ts根本不会生效，反而会让配置逻辑混乱。
• 多个Babel配置文件冲突：同时存在babel.config.js和.babelrc，这两个文件的规则会互相干扰，CRA通常推荐只保留一个Babel配置文件。
• transformIgnorePatterns规则重复且顺序错误：你写了"<rootDir>/node_modules/"和"<rootDir>/node_modules/(?!axios)"，Jest的忽略规则是匹配即忽略，第一个规则会覆盖第二个，导致Axios仍然被排除在转换之外，这很可能是导入错误的直接原因。
• 多余依赖与CRA内置依赖冲突：你手动安装了ts-jest，但CRA已经自带了适配好的Jest + TypeScript处理逻辑，额外的ts-jest会导致版本或规则冲突。

2. 分步修复方案 #

步骤1：移除自定义的jest.config.ts #

直接删除这个文件，因为react-scripts test不会读取它，留着只会增加混乱。所有Jest配置我们将通过package.json的jest字段来调整。

步骤2：清理Babel配置 #

删除.babelrc文件，只保留babel.config.js，并修改为适配CRA和Jest的内容：

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

这个配置会确保Jest能正确转换TypeScript、React和ES6+语法。

步骤3：调整package.json中的配置 #

更新package.json，解决ES模块冲突并修正Axios的转换规则：

1. 卸载多余的ts-jest依赖：

npm uninstall ts-jest

2. 在package.json中添加jest字段，覆盖CRA的默认配置中需要调整的部分：

"jest": {
  "transformIgnorePatterns": [
    "node_modules/(?!axios)/"
  ],
  "moduleNameMapper": {
    "^axios$": "axios/dist/node/axios.cjs"
  }
}

• transformIgnorePatterns：只排除node_modules中除了Axios之外的包，确保Axios会被Babel转换。
• moduleNameMapper：强制导入Axios的CommonJS版本，解决ES模块环境下的导出兼容问题。

步骤4：重置依赖环境 #

删除node_modules和package-lock.json，重新安装依赖，确保没有缓存的冲突：

rm -rf node_modules package-lock.json
npm install

3. 验证修复 #

现在尝试重新运行测试：

npm test

如果导入Axios的错误消失，说明配置冲突已经解决。如果还有问题，可以检查测试文件中的Axios导入是否正确，或者是否有其他依赖也需要添加到transformIgnorePatterns中。

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