前端自动化测试（一）Vue Test Utils + Jest

关于Vue Test Utils

Vue Test Utils是Vue.js 官方的单元测试实用工具库，在Vue和Jest之间提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试，官网链接：https://v1.test-utils.vuejs.org/zh/。

新建Vue项目并使用jest

运行命令vue create ，选择自定义配置。
按需选择配置，倒数第二个配置是单元测试，倒数第一个是端到端测试。
接下来按需选择Vue版本以及其他配置。
这里选择Jest。
一路enter即可，最后需不需要保存配置由你决定。
项目创建好后，我们可以看到自动创建的tests文件夹和其下的一个测试文件，以及jest.config.js配置文件，目录结构如下：

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

可参考（无tests文件夹时会提示）：

已有Vue项目集成Jest

项目中运行vue add @vue/cli-plugin-unit-jest命令，会自动安装所需依赖，并生成jest.config.js文件和一个tests文件夹，目录结构同上面新建的Vue项目的目录结构相同。
npm run test:unit运行测试命令：

jest.config.js文件配置

初始化配置如下：
此时jest使用默认配置，可通过路径
node_modules/@vue/cli-plugin-unit-jest/presets/default/jest-preset.js
找到jest的默认配置：

对于有关jest依赖的解释：
自定义配置jest
一般用到的基础配置：

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  verbose: true, // 多于一个测试文件运行时展示每个测试用例测试通过情况
  bail: true, // 参数指定只要有一个测试用例没有通过，就停止执行后面的测试用例
  testEnvironment: 'jsdom', // 测试环境，jsdom可以在Node虚拟浏览器环境运行测试
  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, // 覆盖率报告，运行测试命令后终端会展示报告结果
  coverageDirectory: "<rootDir>/tests/unit/coverage", // Jest输出覆盖信息文件的目录，运行测试命令会自动生成如下路径的coverage文件
  coverageThreshold: { // 覆盖结果的最低阈值设置，如果未达到阈值，jest将返回失败
    global: {
      branches: 60,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  }
};

较为完整的基础配置，可根据需要自行修改：

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')
  ]
};

更多配置请查阅官网（https://v1.test-utils.vuejs.org/zh/）。

编写测试用例

可参考官网文档（https://v1.test-utils.vuejs.org/zh/）进行编写。