Vue-jest can't find babel

问题

I'm trying to test my vue components however I'm always getting the following error:

Cannot find module 'babel-core' at Object. (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",
    }
};

You can see this behaviour here.

When looking at the referenced file I can see:

const babel = require('babel-core')

Shouldn't that be @babel/core?

So my question is how can I resolve the error? Or is this an issue comming from vue-jest?

回答1:

As suggested by @JamesCoyle installing babel-bridge solved it

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

回答2:

The package vue-jest is based to work on babel-core. You don't have that package installed. In order to fix your problem and not install an extra package go in the file -> \node_modules\vue-jest\lib\compilers\babel-compiler.js and you will see the bellow pice of code:

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

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

The first constant is importing the npm package babel-core.

If you change that with @babel/core your problem should be fixed. After the change it should lookmlike this:

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

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

I have seen solutions on the web where they have suggested to replace babel-core (version 6.) with babe-core(7.0.0.0-bridge). In my case, it broked my solution and I couldn't publish any more but jest worked fine. This is a solution for people who can't install babel-core@7.0.0-bridge.0

To install @babel/core : npm install --save-dev @babel/core Babel-core is version 6 of babel and @babel/core is version 7 of it.

来源：https://stackoverflow.com/questions/54677044/vue-jest-cant-find-babel

标签

Vue.js

jestjs

babeljs