使用Jest与React时遇模块外import错误，求允许转换axios

你遇到的问题是因为axios v1+采用了ES模块格式，而Jest默认会跳过node_modules目录的转译，导致无法识别import语句。下面是具体的解决步骤：

1. 配置Jest允许转译axios模块 #

你需要修改Jest的transformIgnorePatterns配置，让它不对axios进行转译忽略。有两种方式：

方式一：在package.json中添加Jest配置 #

直接在你的package.json末尾添加以下配置：

"jest": {
  "transformIgnorePatterns": [
    "node_modules/(?!axios/)"
  ],
  "testEnvironment": "jsdom"
}

这里的(?!axios/)是正则负向预查，意思是除了axios之外，node_modules里的其他模块都保持默认的转译忽略。

方式二：创建单独的jest.config.js文件 #

如果偏好单独的配置文件，在项目根目录新建jest.config.js，写入：

module.exports = {
  transformIgnorePatterns: ['node_modules/(?!axios/)'],
  testEnvironment: 'jsdom'
};

2. 修复Babel配置的语法错误 #

你的.babelrc文件中，presets数组的最后一项后面多了一个多余的逗号，这会导致语法错误，需要删除：
修改前：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {"runtime": "automatic"}],
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

修改后：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {"runtime": "automatic"}]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

3. 验证修复 #

完成以上配置后，重新运行测试命令：

npm test

此时Jest会使用babel-jest转译axios模块，import语句的语法错误应该会消失。

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