vue-test-utils + jest 单元测试-通用配置

[huangshuwei]

前言

单元测试已经成为前端开发必备技能，下面使用vue-test-utils进行 vue 单元测试。

目录结构

├─build 
├─src 
├─package.json
├─.babelrc
├─.eslintrc
├─jest.config.js
└─test 
      └─unit
          │
          ├─coverage
          │
          └─specs
               *.spec.js

安装依赖

vue-test-utils Vue Test Utils 是 Vue.js 官方的单元测试实用工具库 安装：

$ npm install --save-dev @vue/test-utils

测试运行器 官方推荐两种测试机运行器。第一个是 jest，第二个是 mocha-webpack，考虑到配置的复杂度。我倾向选择 jest 作为测试运行时器。 安装：

$ npm install --save-dev jest

处理单文件组件 为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：

$ npm install --save-dev vue-jest

为 Jest 配置 Babel

尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest

$ npm install --save-dev babel-jest

.babelrc 文件示例：

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

eslint 支持 jest 使用 jest eslint 插件

$ npm install --save-dev eslint-plugin-jest

.eslintrc 配置支持 jest

...
"extends": [
    "plugin:jest/recommended" 
  ],
...

快照格式化 默认快照测试，输出文件包含大量转义符号"/"，我们可以通过jest-serializer-vue插件解决

$ npm install --save-dev jest-serializer-vue

然后修改 jest config

// jest.config.js
...
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
...

jest 配置

创建 jest.config.js 作为jest配置文件

// jest config

module.exports = {
    "verbose": true,
    /*
    * 1、显示代码覆盖率详细信息
    * 2、将测试用例结果输出到终端
    * */
    "collectCoverage": true,
    // 生成测试覆盖报告时检测的覆盖文件
    "collectCoverageFrom": [
        "src/**/*.{js,vue}",
        "!**/node_modules/**"
    ],
    // 覆盖率输出的目录
    "coverageDirectory":"test/unit/coverage",
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "transform": {
        // vue-jest 处理 vue 文件
        ".*\\.(vue)$": "vue-jest",
        // babel-jest 处理 js 文件
        "^.+\\.js$": "./node_modules/babel-jest"
    },
    // 测试套件文件的位置以及规则
    "testRegex": "(/test/unit/spec/.*|\\.(test|spec))\\.js$"
}

设置 scripts 启动

执行 npm run test 读取 jest配置并执行测试程序

// package.json
...
"scripts":{
    "test":"jest --config ./jest.config.js"
}
...

运行测试

普通测试命令：

npm run test

交互式命令，添加 --watch命令标识即可。这种方式会允许键盘操作，当有测试过程有报错时，方便你去筛选和处理

键盘操作有几种选项：
› Press f to run only failed tests. › Press o to only run tests related to changed files. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.

npm run test --watch

完