如果你在使用 VueCLI3 建立的项目中加入了单元测试，那么你可能会遇到一些配置上的困难，特别是在使用 Jest 时。本文将介绍如何在 VueCLI3 中添加 Jest 单元测试，并列举一些遇到的问题及解决方法。
1. 安装 Jest
在项目中安装 Jest 及其相关库：
npm install --save-dev jest vue-jest babel-jest @vue/test-utils jest-serializer-vue
如果你的项目还没有安装 @vue/cli-plugin-unit-jest，请先安装该插件：
vue add unit-jest
安装完毕后，您将在项目中生成 tests/unit 目录，其中包含样例测试文件 example.spec.js 和 Jest 配置文件 jest.config.js。
2. 配置 VueCLI3
由于 VueCLI3 使用了 Babel 7，你需要在项目中安装 babel-jest 用于将 ES6+ 代码转换为 commonJS 格式。
找到 jest.config.js 文件，添加以下代码：
module.exports = {
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\js$': 'babel-jest'
}
}这段代码告诉 Jest，将您在测试文件中导入的 .vue 和 .js 文件转换为可以在 Jest 中运行的代码格式。
3. 在组件中编写测试
在你的组件目录下新建测试文件 yourComponentName.spec.js，例如：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
------ ----------------- ---- ------------------------------------
--------------------------------- -- -- -
----------- --------- ---- -------- -- -- -
----- --- - ---- --------
----- ------- - ------------------------------- -
---------- - --- -
--
-----------------------------------
--
--这是一个简单的测试，用于确保当您传递给组件时，它能够正确地渲染出相应的信息。
4. 遇到的坑
错误提示 "Jest: 'vue-jest' is not installed."
解决方法：请检查是否在项目中正确地安装了 vue-jest。如果已安装，试着重新执行 npm install 或者 yarn。
"SyntaxError: Unexpected token import"
解决方法：请检查项目中是否已安装 babel-jest 并在 jest.config.js 配置文件上添加了相关代码。
在 beforeEach 中调用 Vue.use() 报错
解决方法：在运行每个测试之前，使用 Vue.use() 注册插件时，确保被注册的插件已经安装，否则将导致Cannot read property 'extend' of undefined的错误。正确的做法是将安装插件的代码移到 main.js 中，确保在运行任何测试之前它已经被安装了。
结论
本文介绍了在 VueCLI3 中配置 Jest 单元测试的方法，以及遇到的常见坑，并提供了可能的解决方法。希望这篇文章能够帮助你更好地高效开发 Vue 项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3757ae1e8e99bfaf7334a