如何在我的项目中协调 Babel 插件与 Jest 和 Webpack？

问题描述

我正在使用 Jest（我的首选测试框架）来测试前端 React 项目中的 .jsx 文件。

此命令用于安装 Jest：npm i --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

这些是 package.json 文件中已安装的依赖项：

  "dependencies": {
    "@babel/preset-env": "^7.13.15","@babel/preset-react": "^7.13.13","babel-jest": "^26.6.3","body-parser": "^1.19.0","cors": "^2.8.5","express": "^4.17.1","jest": "^26.6.3","net": "^1.0.2","react": "^16.0.0","react-dom": "^16.0.0","react-router-dom": "^4.1.2","react-test-renderer": "^17.0.2","rootpath": "^0.1.2"
  },"devDependencies": {
    "@types/node": "^8.0.29","babel-core": "^6.26.0","babel-loader": "^7.1.5","babel-preset-env": "^1.6.1","babel-preset-react": "^6.16.0","babel-preset-stage-0": "^6.24.1","file-loader": "^6.2.0","html-webpack-plugin": "^3.2.0","path": "^0.12.7","webpack": "^4.15.0","webpack-cli": "^3.0.8","webpack-dev-server": "^3.11.2"
  }

为了运行依赖Webpack的项目，.babelrc文件是这样的：

{
  "presets": [
      "react","env","stage-0"
  ]
}

但是，我需要将预设更改为以下内容，以便 Jest 能够处理测试用例。

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

如果我使用上述预设运行项目，我会在本地主机服务器上收到此消息：

错误：子编译失败：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js): 错误：需要 Babel “^7.0.0-0”，但加载了“6.26.3”。如果你确定你有一个 @babel/core 的兼容版本，很可能是 您的构建过程正在加载错误的版本。检查堆栈 跟踪此错误以查找未提及的第一个条目 "@babel/core" 或 "babe l-core" 看看什么叫 Babel。 （尽管 处理预设：“C:\GIT\TypeORMcar\frontbackTypeORMcar \frontend\node_modules\@babel\preset-env\lib\index.js")

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）