单元测试
1、针对程序的最小单元来进行正确性检验的测试工作;
2、通俗的讲是为了测试某一个类或某一个方法能够正常工作,而写的测试代码;
案例
需求
通过点击按钮让数字从0开始自增的页面做单元测试
Counter.vue
<template>
<div>
<h3>count自增</h3>
<p>{{count}}</p>
<button @click="increase">count自增</button>
</div>
</template>
<script>
export default {
data(){
return{
count:0
}
},
methods:{
increase(){
this.count ++ ;
}
}
}
</script>
单元测试文件Counter.spec.js
import Vue from 'vue'
import {expect} from 'chai'
import {mount} from '@vue/test-utils'
import Counter from '@/components/Counter'
describe('测试Counter.vue',()=>{
it('点击按钮后,count的值会+1',()=>{
const Constructor = Vue.extend(Counter);
const vm = new Constructor().$mount();
const button = vm.$el.querySelector('button');
const clickE = new window.Event('click');
button.dispatchEvent(clickE);
vm._watcher.run();
expect(Number(vm.$el.querySelector('span').textContent()).to.equal(1))
})
})
describe('测试vue-test-util的用例',()=>{
it('获取元素并断言值是否一致',()=>{
const wrapper = mount(Counter);
const h3= wrapper.find('h3');
expect(h3.text().to.equal('count自增'))
})
})
在命令行执行下面脚本可以看到断言成功或者失败
npm run test