1. 使用vite搭建测试项目:
vue create test-vue-jest
注意:Jest可以用在那些使用vite通过本地ESM提供一些前端工具来提供源代码的项目中,vite是一个固执己见的工具,并且确实提供了一些开箱即用的工作流。由于vite的插件系统的工作方式,Jest不完全支持vite,但有一些使用vite- Jest集成一流Jest的工作示例,由于它不完全支持,您不妨阅读一下vite- Jest的限制。请参考vite指南开始。或者你也可以使用vitest。
选择单元测试:Unit Testing--->jest
2. 配置 jest.config.js
module.exports = {
transform: {
"^.+\\.vue$": "vue-jest",
},
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
moduleFileExtensions: [
'js',
'ts',
'vue'
],
// 开启生成覆盖率功能
"collectCoverage": true,
// 配置需要检查覆盖率的文件
"collectCoverageFrom": [
"src/**/*.{js,vue}",
"!**/node_modules/**",
"!src/main.js",
"!src/router/index.js",
"!src/store/index.js"
]
};
3. npm run test:unit 运行测试
4. 初次运行时报错: vue-template-compiler
Test suite failed to run Cannot find module 'vue-template-compiler
vue-template-compiler是vue2的包,vue3使用的是 vue/compiler-sfc
解决:
(1) npm i vue-jest@next @vue/test-utils@next -D (或npm i vue3-jest )
(2)module.exports = { //... transform: { "^.+\\.vue$": "vue-jest", }, };
5. 报错 Cannotread property 'hasOwnProperty' of undefined
解决:shallowMount改为mount (vue2升级为vue3即可)