Vue-jest 找不到 babel

Posted 2023-02-22

【中文标题】Vue-jest 找不到 babel

【英文标题】：Vue-jest can't find babel

【发布时间】：2019-07-07 16:35:32

【问题描述】：

我正在尝试测试我的 vue 组件，但是我总是收到以下错误：

在 Object 中找不到模块“babel-core”。 (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15)

package.json:

"devDependencies": 
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "jest": "^24.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.6",
    "vue-jest": "^3.0.3",
    "vue-loader": "^15.6.2",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.29.3",
,

.babelrc

    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]

jest.config.js

module.exports = 
    verbose: true,
    moduleFileExtensions: [ "js", "json", "jsx", "ts", "tsx", "node", "vue" ],
    transform: 
        // process js with `babel-jest`
        "^.+\\.js$": "babel-jest",
        // process `*.vue` files with `vue-jest`
        ".*\\.(vue)$": "vue-jest",
    
;

你可以看到这种行为here。

查看引用的文件时，我可以看到：

const babel = require('babel-core')

不应该是@babel/core吗？

所以我的问题是如何解决错误？或者这是来自vue-jest 的问题？

【问题讨论】：

你可能只需要这个：github.com/babel/babel-bridge

【参考方案1】：

按照@JamesCoyle 的建议安装babel-bridge 解决了它

npm i -D babel-core@^7.0.0-bridge.0

【参考方案2】：

包vue-jest 是基于babel-core 工作的。您没有安装该软件包。为了解决你的问题而不是安装额外的包，进入文件 -> \node_modules\vue-jest\lib\compilers\babel-compiler.js 你会看到下面的代码：

const babel = require('babel-core')
const loadBabelConfig = require('../load-babel-config.js')

module.exports = function compileBabel (scriptContent, inputSourceMap, inlineConfig, vueJestConfig, filePath) 
  ...

第一个常量是导入 npm 包 babel-core。

如果你用 @babel/core 改变它，你的问题应该得到解决。修改后应该是这样的：

const babel = require('@babel/core')
const loadBabelConfig = require('../load-babel-config.js')

module.exports = function compileBabel (scriptContent, inputSourceMap, inlineConfig, vueJestConfig, filePath) 
  ...

我在网上看到过他们建议用 babe-core(7.0.0.0-bridge) 替换 babel-core（版本 6.）的解决方案。就我而言，它破坏了我的解决方案，我无法再发布，但玩笑效果很好。这是无法安装的人的解决方案 babel-core@7.0.0-bridge.0

安装 @babel/core ： npm install --save-dev @babel/core Babel-core 是 babel 的第 6 版，@babel/core 是它的第 7 版。

【讨论】：

这可能在您的机器上运行一次，但手动更改 ./node_modules 意味着它仅在您的机器上更改。您的同事或构建系统将再次遇到同样的问题。