Vue项目中添加单元测试

Vue项目的单元测试用的是Vue Test Utils，这是Vue.js 官方的单元测试实用工具库，在Vue和Jest之间提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试

官网链接：介绍 | Vue Test Utils

一、新建Vue项目并使用Jest

1、运行命令vue create ，选择自定义配置

2、按需选择配置，单元测试选择Unit Testing，端到端测试选择B2B Testing

3、接下来按需选择Vue版本以及其他配置，选择Jest，一路回车确定即可，最后需不需要保存配置由你决定

4、项目创建好后，可以看到自动创建的tests文件夹和其下的一个测试文件，以及jest.config.js配置文件

5、运行package.json中的脚本命令 npm run test:unit，即可执行tests文件夹下所有的测试文件（默认后缀为spec.js/spec.ts）以及所有的js/ts文件

二、已有Vue项目集成Jest

1、在vue项目目录下运行 vue add @vue/cli-plugin-unit-jest 命令，这个命令会帮我们把相关的配置都配好，相关的依赖都装好，并生成jest.config.js文件和一个tests文件夹，目录结构同上面新建的Vue项目的目录结构相同

2、npm run test:unit 运行测试命令

三、package.json中的测试脚本命令

"scripts": {
    "test:unit": "vue-cli-service test:unit --coverage test --reporters=jest-junit",
 }

**--coverage**：全量覆盖率报告，会生成一个coverage文件夹，打开里面的index.html 里面会有详细的信息展示

**test jest --reporters=default --reporters=jest-junit**：测试报告，执行这个命令，会生成一个junit.xml文件，但要成功执行这条命令，必须执行 npm i jest-junit --save-dev，安装jest-junit依赖

更多配置可参考：https://jestjs.io/zh-Hans/docs/

四、jest.config.js文件配置

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  verbose: true, // 多于一个测试文件运行时展示每个测试用例测试通过情况
  bail: true, // 参数指定只要有一个测试用例没有通过，就停止执行后面的测试用例
  testEnvironment: 'jsdom', // 测试环境，jsdom可以在Node虚拟浏览器环境运行测试
  moduleFileExtensions: [ // 需要检测测的文件类型
    'js',
    'jsx',
    'json',
    // tell Jest to handle *.vue files
    'vue'
  ],
  transform: { // 预处理器配置，匹配的文件要经过转译才能被识别，否则会报错
    '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$':
    require.resolve('jest-transform-stub'),
    '^.+\\.jsx?$': require.resolve('babel-jest')
  },
  transformIgnorePatterns: ['/node_modules/'], // 转译时忽略 node_modules
  moduleNameMapper: { // 从正则表达式到模块名称的映射，和webpack的alisa类似
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [ // Jest在快照测试中使用的快照序列化程序模块的路径列表
    'jest-serializer-vue'
  ],
  testMatch: [ // Jest用于检测测试的文件，可以用正则去匹配
    '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  collectCoverage: true, // 覆盖率报告，运行测试命令后终端会展示报告结果
  collectCoverageFrom: [ // 需要进行收集覆盖率的文件，会依次进行执行符合的文件
    'src/**/*.{js,vue}',
  ],
  coverageReporters: ['html', 'lcov', 'text-summary'], // Jest在编写覆盖率报告的配置，添加"text"或"text-summary"在控制台输出中查看覆盖率摘要
  coveragePathIgnorePatterns: ['/node_modules/'], // 需要跳过覆盖率信息收集的文件目录
  coverageDirectory: "<rootDir>/tests/unit/coverage", // Jest输出覆盖信息文件的目录，运行测试命令会自动生成如下路径的coverage文件
  coverageThreshold: { // 覆盖结果的最低阈值设置，如果未达到阈值，jest将返回失败
    global: {
      branches: 60,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
  testURL: 'http://localhost/', // 官网没有解释，经过尝试可以随意配置ip，如果识别不出是ip则会报错
  watchPlugins: [ // jest监视插件
    require.resolve('jest-watch-typeahead/filename'),
    require.resolve('jest-watch-typeahead/testname')
  ]
};

具体可参考官方文档：介绍 | Vue Test Utils