前言
昨天从0开始配置vue3 + jest让我头疼了两小时，各种问题，其中最烦的是版本兼容问题。。所以这里写一个文章方便自己回来翻阅。
其实不必这么麻烦的，直接用vue-cli即可，直接配置好了。。。
不过学习嘛，就是得从零开始印象才深。
代码上传到GitHub了，可以拉下来看下。
https://github.com/1714080902120/webpack5-vue3-jestgithub.com/1714080902120/webpack5-vue3-jest
安装
有些包你可能不清楚是干什么用的，没关系，后面配置的时候会说。
先创建安装环境
安装webpack的三件套
安装下html-webpack-plugin
安装vue3、vue-loader、@vue/vue3-jest[1] 、@vue/test-utils[2]
安装@babel/core、@babel/preset-env、babel-jest[3] ,注意这里的babel-jest，需要限制版本到27.0.6，不然会有兼容性问题
安装jest，如果你全局没有安装，建议安装一个，这里注意需要把jest的包限制为27.0.5的版本，因为和vue-test-utils有兼容性问题
那么所有依赖的包都安装完了，接下来该配置了。
另外安利下pnpm,如果你安装的包中存在依赖是你没安装的，会有提示。但有些包存在兼容性问题。。
配置
配置webpack.config.js，先创建文件，然后将下面的代码copy到文件中。
然后创建index.html
创建main.js
创建views/App.vue
然后在package.json中新增script
现在项目已经可以本机跑起来了，在终端输入npm run serve
然后我们来配置下jest相关的，如果你还不清楚jest是啥，可以先看下我之前的文章
创建babel.config.js
配置这个是为了jest的test文件中能使用esm，不然你的vue-test-utils就无法使用。
接着创建jest.config.js，如果你全局安装了jest，直接jest --init，然后在你的testEnvironments选项选择jsdom(browser-like)，这样才能支持浏览器端代码测试。
复制一下内容到文件中
moduleFileExtensions: 支持的文件，默认没有vue，得自己加上。testEmvironment: 表示测试环境，默认jest-environment-node，node环境。transform: 需要转换的语法，而babel-jest则是将esm语法转换为cjs语法，vue3-jest则是将vue语法转换为js，少了这一步你的jest也无法运行。
引入我们的vue专属测试包vue-test-utils，将我们的组件导入到mount方法中，返回一个wrapper对象，然后模拟点击事件看结果。
最后在package.json中配置下script
然后在终端运行测试下npm run test
测试成功！
到此就配置完了。
如果觉得对你有用，点个赞~谢谢！
参考
- ^vue3-jest https://www.npmjs.com/package/vue3-jest
- ^vue-test-utils https://github.com/vuejs/test-utils
- ^babel-jest https://www.npmjs.com/package/babel-jest
编辑于 2022-10-22 21:43