React项目执行npm test时出现模块外import语法错误求助

问题根源 #

错误提示显示axios源码使用了ES模块的import语法，但Jest默认会忽略转译node_modules目录下的文件，导致无法解析该语法。

解决方案 #

方案1：让Jest转译指定的ES模块依赖 #

1. 移除冲突依赖
   你手动安装的jest和babel-jest与react-scripts内置的版本存在冲突，先卸载这些依赖：

   npm uninstall jest babel-jest
   

2. 在package.json中添加Jest配置
   在package.json里新增jest字段，指定需要转译的依赖：

   {
     // ... 原有配置内容
     "jest": {
       "transformIgnorePatterns": [
         "node_modules/(?!axios)/"
       ]
     }
   }
   

   该配置表示：除axios外，其他node_modules文件跳过转译，即仅对axios进行语法转译。

3. 简化Babel配置（可选）
   react-scripts已内置React项目所需的Babel预设，可简化babel.config.js或直接删除（无自定义Babel需求时）：

   module.exports = {
     presets: ["react-app"]
   };
   

方案2：Mock axios模块 #

若测试无需真实调用axios，可直接mock该模块避免加载真实源码：
在App.test.jsx顶部添加mock代码：

jest.mock('axios', () => ({
  // 根据项目中axios的实际使用场景定义mock方法
  get: jest.fn().mockResolvedValue({ data: {} })
}));

import { render } from "@testing-library/react";
import App from "./App";

describe("<App />", () => {
  it("should match snapshot", () => {
    const snapshot = render(<App />);
    expect(snapshot).toMatchSnapshot();
  });
});

验证 #

修改完成后重新运行测试：

npm test

内容的提问来源于stack exchange，提问作者Thành Nhân