安装最新 Jest 报错：TypeError: Cannot read property ‘instrument‘ of undefined

背景：

为了在已有的项目中加入 Jest ，踩了不少坑，坑列举如下，采用过的解决方式，出现的新问题，最终的处理手段。

首先，我的项目是 Vue2，package.json 的 babel 为 @babel，因此才会出现以下种种问题，该版本的处理方式是，不用管 babel 的版本问题，而是采用 CLI 插件 去启动 jest；若为 babel 版本，正常 npm install -g jest 配置脚本即可，后面会有说明；Vue3 的 Jest 安装更为简单，本篇不涉及。

坑1： 直接在 Vue 项目中运行，报错

requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babe

试过：

npm install --save-dev "babel-core@^7.0.0-bridge.0"

还安装了各种@babel 或 babel

但都没有起作用。猜测是 Jest 自带的包导致的冲突。

坑2： 那么把 Jest 升级到最新版吧，27+。报错

TypeError: Cannot read property 'instrument' of undefined

咋办呢？网上好像找不出好方法了，那么去 github 上，看看大佬们 @babel + Vue2 + Jest 能跑得起来的项目吧，这里给出了最小的安装项。

解决方法

npm install @vue/test-utils -D
npm install @vue/cli-service -D
npm install @vue/cli-plugin-unit-jest -D

jest.conf.js 放在根目录下，或 tests 目录下，或任何你想放的

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: false
}

package.json 配置脚本和配置文件目录

"scripts": {
   "test:unit": "vue-cli-service test:unit --config ./tests/jest.conf.js",
}

如果你报错了：

解决：报错信息说明。路径不匹配，找不到测试文件，因此把目录改成 tests/unit 即可。

报错：

解决：由报错信息可知，vue-template-compiler 和 vue 需为同一个版本，因此安装 vue-template-compiler 对应的 vue 版本即可。我的是 npm install vue-template-compiler@2.6.10

至此单元测试就跑起来了，老激动了。

补充：

我的项目没有改动过.babelrc 文件，就可以跑起来了

我的 package.json：

这里讲讲，为 babel 版本的 Jest 安装和配置，先看看部分的 package.json

简单启动一个项目

安装 Jest
全局：npm install -g jest 或局部： npm install -D jest
在 package.json 中指定 test 脚本：

运行脚本即可测试。

最后的最后，若是 TS，则需额外安装其他的包和额外进行配置，网上找不到就去看看 github 吧。