vue-jest vue3

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即可）

6. 测试覆盖率结果文件：coverage-->lcov-report-->index.html  (没有被覆盖的代码是红色)