\" 不能在模块外使用 import 语句\" 错误同时使用 jest 和 react答案

【问题标题】：" Cannot use import statement outside a module" error while using jest and react\" 不能在模块外使用 import 语句\" 错误同时使用 jest 和 react
【发布时间】：2022-11-11 08:42:33
【问题描述】：

我正在尝试使用 jest 和 react-testing-library 进行测试，但是当我尝试在测试块中呈现应用程序时，我收到了这个错误：

...{import axios from './lib/axios.js';
                                                                                 

SyntaxError: Cannot use import statement outside a module

经过一番研究，我发现 jest 在使用 babel-jest 转换模块时会忽略 node_modules 中的所有内容。有没有办法让 axios 模块被转换？

这是我的 package.json 文件

{
  "name": "weather_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack serve --config webpack.config.js",
    "react-dev": "webpack --mode development --watch",
    "server-dev": "npx nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/react": "^13.4.0",
    "babel-jest": "^29.2.0",
    "babel-loader": "^8.2.5",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^29.2.0",
    "jest-environment-jsdom": "^29.2.0",
    "react-test-renderer": "^18.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "axios": "^1.1.2",
    "dotenv": "^16.0.3",
    "mysql2": "^2.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "url": "^0.11.0"
  }
}

还有我的 .babelrc 文件

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

我没有任何其他用于 jest 或 babel 的配置文件

【问题讨论】：

标签： reactjs jestjs

【解决方案1】：

我找到了解决方案。您可以在 jest.config.js 文件中添加一个属性，并指定节点模块中的模块以进行具体转换，但仍然忽略其余节点模块。要告诉 babel-jest 转换 axios，它看起来像这样：

transformIgnorePatterns: ['<rootDir>/node_modules/(?!(axios)/)']

【讨论】：

【解决方案2】：

This axios issue (#5106) 帮助了我（只需将 axios 降级到 v0.27.2 就可以了）。

【讨论】：