一、Mocha简介

Vue CLI 拥有开箱即用的通过 Jest 或 Mocha 进行单元测试的内置选项。
Mocha--github
https://mochajs.org/
测试示例
https://vue-test-utils.vuejs.org/zh-cn/

二、安装组件

npm install --save-dev vue-test-utils

二、创建测试

创建测试组件
Test.vue

创建测试脚本
Test.spec.js

// 引入测试组件
import { expect } from 'chai';
import { shallowMount } from '@vue/test-utils';
// 测试组件
import Test from '@/components/Test.vue';

// 创建测试套件，一个测试组件写一个测试套件
describe('Test.vue', () => {
  // 测试用例，用来测试不同的方法或者显示的内容
  it('测试通过', () => {
    // 定义数据
    const message = 'bye!';
    // shallowMount 挂载数据
    const wrapper = shallowMount(Test, {
      propsData: { message },
    });
    // 断言:页面中是否有message所渲染出来的内容
    expect(wrapper.text()).to.include(message);
  });
});

测试脚本应该包含一个或多个describe, 每个describe块应该包括一个或多个it块describe块称为"测试套件"(test suite), 表示一组相关的测试。它是一个函数, 第一个参数是测试套件的名称(通常写测试组件的名称, 这里即为Test.vue), 第二个参数是一个实际执行的函数。

it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述你的断言结果), 第二个参数是一个实际执行的函数.

三、运行测试

npm run test:unit

测试结果：

测试结果

四、Chai断言库

所谓断言, 就是判断源码的实际执行结果与预期结果是否一致, 如果不一致, 就会抛出错误。

 // 相等或不相等
  expect(1 + 1).to.be.equal(2);
  expect(1 + 1).to.be.not.equal(3);

  // 布尔值为true
  expect('hello').to.be.ok;
  expect(false).to.not.be.ok;

  // typeof
  expect('test').to.be.a('string');
  expect({ foo: 'bar' }).to.be.an('object');
  expect(foo).to.be.an.instanceof(Foo);

  // include
  expect([1,2,3]).to.include(2);
  expect('foobar').to.contain('foo');
  expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

  // empty
  expect([]).to.be.empty;
  expect('').to.be.empty;
  expect({}).to.be.empty;
  
  // match
  expect('foobar').to.match(/^foo/);

五、Chai断言库vue-test-utils的常用API

find(): 返回匹配选择器的第一个DOM节点或Vue组件的wrapper, 可以使用任何有效的选择器
text(): 返回wrapper的文本内容
html(): 返回wrapper DOM的HTML字符串

 it('find()/text()/html()方法', () => {
    const wrapper = mount(Counter);
    const h3 = wrapper.find('h3');
    expect(h3.text()).to.equal('Counter.vue');
    expect(h3.html()).to.equal('Counter.vue');
  })

trigger(): 在该 wrapper DOM 节点上触发一个事件。

it('trigger()方法', () => {
    const wrapper = mount(Counter);
    const buttonOfSync = wrapper.find('.sync-button');
    buttonOfSync.trigger('click');
    buttonOfSync.trigger('click');
    const count = Number(wrapper.find('.num').text());
    expect(count).to.equal(2);
  })

setData(): 设置data的属性并强制更新

it('setData()方法',() => {
    const wrapper = mount(Counter);
    wrapper.setData({foo: 'bar'});
    expect(wrapper.vm.foo).to.equal('bar');
  })

VUE开发--单元测试(五十一)