使用的是vue cli ^4.0.0的脚手架，项目采用的vue2进行编写，项目本身是没有使用单元测试的。应该挺多项目还是使用的vue2的项目进行开发的，自己在开发中过程中，还是发生了挺多需要记录原来功能的情况，这个时候去翻文档明显是不怎么可取的，且项目中文档不一定写的很好。
安装的依赖
pnpm i -D @vue/cli-plugin-unit-jest@4 @vue/test-utils@1 jest@26 @vue/vue2-jest@26 babel-jest@26
增加执行测试的脚本
文档路径：package.json
{"scripts": {// ..."test:unit": "jest",}
}
增加jest配置
文档路径：jest.config.js
module.exports = {preset: '@vue/cli-plugin-unit-jest',collectCoverage: false,collectCoverageFrom: ['src/**/*.{js,vue}','!src/main.js','!src/router/index.js','!src/store/**/*.js','!**/node_modules/**',],
};修改babel的配置
文档路径：.eslintrc.js
module.exports = {// ...env: {// ...jest: true,},
}
测试的组件
文件路径：tests\unit\components\formModule.spec.js，默认的测试文件的路径匹配到**/tests/unit/**/*/之下的文件中，所以按这个路径放文件就可以测试到
import { mount } from '@vue/test-utils';
import formModule from '@/components/form/formModule.vue';describe('测试组件formModule.vue', () => {it('测试表单模块标题', () => {const title = '基本信息';const wrapper = mount(formModule, {propsData: {title,},});expect(wrapper.text()).toMatch(title);});
});执行测试
npx pnpm test:unit
如果使用collectCoverage： true的配置的话， 可以生成代码的覆盖率
其他安装依赖的问题
问题1：TypeError: (0 , _vueJest.describe) is not a function
解决：在eslint中的env中添加jest为true
问题2：TypeError: Cannot destructure property ‘ensureValidVNode’ of ‘Vue.ssrUtils’ as it is undefined
解决：安装npx pnpm i -D @vue/test-utils@1