一、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
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
- 创建测试脚本
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('<h3>Counter.vue</h3>');
})
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');
})
