发表于 | | 阅读次数:
字数统计: 578 | 阅读时长 ≈ 2

vue-jest-utils 报错：“Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”.”解决思路

问题描述

使用vue-test-utils编写测试用例，运行npm run test是，报错：

Test suite failed to run
Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”.

如图所示：

解决思路

  1. 升级Babel
  2. package.json 与 package-lock.json
  3. babel-regsiter 与 babel-core

具体步骤

Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行，如：

1
2
3
4
5
6
7
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
  return item + 1;
});

运行 npx babel-upgrade 进行升级，依然有错误。仔细寻找后发现:

package.json 中的依赖 @babel/core版本号为7.8.0，而package-lock.json 中 bebel-regsiter的依赖babel-core 版本号为 6.26.3。与报错信息吻合，这就引出了两个问题：

  1. package.json 与 package-lock.json 是什么关系？
  2. babel-register 与 babel-core 具体是什么关系，是否可以升级babel-register?

package.json 与 package-lock.json

package.json

package.json是通过npm init创建时生成的，package.json文件中会记录项目中所需要的模块。记录的只是每个模块的基本信息。模块名称和大版本信息。

package-lock.json

在使用npm install的时候会自动生成一个package-lock.json的文件，package-lock.json文件则会记录每个模块的详细信息，如模块的具体版本号和各个模块所依赖的子模块的信息。

babel-register

这时候可能有一种猜测，babel-register的依赖版本可能有问题，那什么是babel-register?

一个使用 Babel 的方法是通过 require 钩子。

在package-lock.json里面寻找发现，既有@babel/register 的依赖（版本号：7.8.6），又有 babel-register 依赖（版本号：6.26.X）

是不是因为依赖重复了？

发现 vue-jest 有低版本的babel-core依赖,

1
2
npm install --save-dev vue-jest
npm install --save-dev babel-core@bridge // 重要

babel.conf.js

依然有错误，提示在/node_modules/vant/库中有问题。为什么只有vant库有问题呢？
这时候找到了babel.conf.js文件。

Babel.conf.js 是Babel7以上的配置文件，在配置文件中发现一个配置：

1
2
3
4
5
6
7
8
[
  "import",
  {
    "libraryName": "vant",
    "libraryDirectory": "es",
    "style": true
  }
],

原来在这里，注释掉之后，运行 npm run test

成功，大功告成。

0%