vue单元测试

909 阅读1分钟

单元测试

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