Jest无法识别ECMAScript Modules，执行测试时出现语法错误

测试执行时触发Jest解析错误，提示代码使用了非标准JavaScript语法，具体报错为SyntaxError: Cannot use import statement outside a module，错误出现在src/hooks/useTreeDataFetching.js第2行的import axios from 'axios'语句。

报错详情 #

({"Object.<anonymous>:function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { useState, useEffect } from 'react';
    > 2 | import axios from 'axios';
        | ^
      3 |
      4 | const useTreeDataFetching = (url) => {
      5 |   const [data, setData] = useState([]);

      at Runtime.createScriptFromCode (node_modules/react-scripts/node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/hooks/useTreeDataFetching.js:2:1)
      at Object.<anonymous> (src/components/TreeList/TreeList.js:3:1)
      at Object.<anonymous> (src/tests/TreeList.test.js:3:1)

当前package.json配置 #

"devDependencies": {
    "@babel/core": "^7.23.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.23.5",
    "@babel/register": "^7.22.15",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.0",
    "babel-jest": "^29.7.0",
    "jest": "^29.7.0",
    "prettier": "3.0.3"
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }

解决方案 #

1. 完善Babel配置文件 #

项目缺少React相关的Babel预设，导致JSX和React模块语法未被转译。在项目根目录创建或修改babel.config.js（或.babelrc），添加@babel/preset-react：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-proposal-private-property-in-object'
  ]
};

2. 调整Jest配置，处理第三方ES模块 #

axios当前可能采用ES模块语法，而Jest默认不转译node_modules下的文件，需在Jest配置中添加例外，让babel-jest处理axios：

"jest": {
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "/node_modules/(?!axios)/"
  ]
}

3. 可选：设置package.json的模块类型 #

如果项目整体使用ES模块，在package.json中添加"type": "module"，但需确保Jest配置兼容（若使用上述Babel转译，此步骤可省略）：

"type": "module"

原理说明 #

Jest默认运行在CommonJS环境中，无法直接识别ES模块的import语法。通过Babel的@babel/preset-env可将ES模块转译为CommonJS，@babel/preset-react则处理React的JSX语法。另外，第三方模块如axios若使用ES模块，需让Jest允许转译该模块，否则会触发语法错误。

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