配置vue单元测试

配置vue/test-utils

配置test-utils有两种方式

1. 第一种是在已创建好的vue项目里使用

   vue add test-utils

   使用该命令之后，vue会自动下载依赖，并且给出一个组件测试的例子。

2. 手动配置

   首先需要下载依赖，注意一点，在vue2中，需要下载@vue/test-utils@1 版本，在vue3中在下载默认版本即可，本文默认下载vue2中的依赖包。

   npm i -D @babel/preset-env @vue/cli-plugin-unit-jest @vue/vue2-jest babel-core@7.0.0-bridge.0 babel-jest jest jest-serializer-vue vue-jest

   下载完依赖以后，需要在babel.config.js中加入设置

   {
     "presets": ["@babel/preset-env"]
   }

   然后在jest.config.js中增加如下设置

   module.exports = {
     //use jsdom environment since jest v27
     testEnvironment: 'jsdom',
     // 表示是否应该在运行期间报告每个单独的测试。所有的错误在执行后仍然会显示在底部。注意，如果只有一个测试文件在运行，它将默认为 "true"。   
     verbose: true,
     // 这个选项设置了jsdom环境的URL。它反映在诸如location.href等属性中。
     testURL: 'http://localhost/',
     // 告诉jest需要解析的文件
     moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
     // 告诉jest去哪里找模块资源，同webpack中的modules
     moduleDirectories: ['src', 'node_modules'],
     // 告诉jest针对不同类型的文件如何转义
     transform: {
       '.*\\.(vue)$': 'vue-jest',
       '.*\\.(js)$': 'babel-jest'
     },
     // 告诉jest在编辑的过程中可以忽略哪些文件，默认为node_modules下的所有文件
     transformIgnorePatterns: ['<rootDir>/node_modules/'],
     // 别名，同webpack中的alias
     moduleNameMapper: {
       '^@/(.*)$': '<rootDir>/src/$1'
     },
     // 快照的序列化工具
     snapshotSerializers: ['jest-serializer-vue'],
     // 告诉jest去哪里找我们编写的测试文件
     testMatch: [
       '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)',
       '**/__tests__/unit/*.(spec|test).(js|jsx|ts|tsx)'
     ]
     // 在执行测试用例之前需要先执行的文件
     // setupFiles: ['jest-canvas-mock']
   }

   在配置完如上的这些配置以后，就可以在test/unit文件或者__tests/unit下编写单元测试。