Vue Test Utils前端单元测试

含义

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下，系统集成过程将会大大地简化。
1

流行框架

Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/)
Mocha + Chai 方式
Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具
./test/sum.test.js

const { expect, assert } = require('chai');
const sum = require('../sum');

describe('sum', function() {
  it('adds 1 + 2 to equal 3', () => {
    assert(sum(1, 2) === 3);
  });
});
1
2
3
4
5
6
7
8

Jest 方式
Jest 默认支持断言，同时默认支持覆盖率测试
./test/sum.test.js

const sum = require('./sum');

describe('sum function test', () => {
  it('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别，it 是指: it should xxx, test 是指 test xxx
  test('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
})
1
2
3
4
5
6
7
8
9
10
11
12

可见无论是受欢迎度和写法上，Jest 都有很大的优势，因此推荐使用开箱即用的 Jest

Vue Test Utils

Vue.js 官方的单元测试实用工具库。
提供特定的方法，在隔离的环境下，进行组件的挂载，以及一系列的测试。被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。
1
2

Vue Test Utils 使用

方式一：