vue-cli的单元测试
近来项目开辟邻近末端,深思之前做的不足的处所,想着应当引入测试类的做法,于是乎最先进修前端测试之类的文档。由于项目是基于vue-cli的单页面,所以想着在此基础上拓展。
测试框架范例
vue官方供应了几种测试框架 jest,mocha 等这几种测试框架,本次案例采纳的是 karma + mocha + chai 这个配套来完成的。而且照样连系了 vue-test-utils 这个官方的测试库。迥殊申明,在装置vue-cli时在挑选测试范例时,经由过程 上下键 来挑选对应的测试框架
详细案例申明
静态文件加载测试
import Vue from 'vue'
import Test from '@/components/Test'
import {mount} from 'vue-test-utils'
describe('Test.vue',()=>{
it('页面加载胜利',()=>{
const wrapper = mount(Test);
expect(wrapper.find('h1').text()).to.equal('My First UnitTest');
})
})
首页引入要测试的文件以及vue-test-utils供应的要领mount,经由过程这个要领挂载页面,能够轻松猎取页面的Dom元素。describe以及it就是mocha的语法,二者离别接收两个参数。前者是要测试的页面,后者是测试时的提醒语,然后都接收一个函数,在it内里的函数则是要断言出你要的效果,即expect()的内容是不是即是你想要的效果。
事宜操纵测试
import Vue from "vue"
import Event from '@/components/Event'
import { mount } from 'vue-test-utils'
describe('Event.vue',()=>{
it('事宜要领测试',()=>{
const wrapper = mount(Event);
const clickButton = wrapper.find('button');
clickButton.trigger('click');
const number = Number(wrapper.find('input').element.value);
expect(number).to.equal(2);
})
})
团体花样差不多,主如果就是用到vue-test-utils的trigger要领模仿点击操纵
异步操纵测试
import Vue from 'vue'
import {mount,shallow} from 'vue-test-utils'
import AsyncEvent from '@/components/AsyncEvent'
describe('AsyncEvent.vue',()=>{
it('异步行动测试',(done)=>{
const wrapper = mount(AsyncEvent);
wrapper.find('button').trigger('click');
setTimeout(()=> {
expect( Number(wrapper.find('span').text()) ).to.equal(2);
done();
}, 1000)
})
})
这里运用setTimeout来做异步测试,注重的是这里要运用 done 这个要领来肯定什么时候实行测试完毕
VUEX测试
import { shallow, createLocalVue } from 'vue-test-utils'
import Vuex from 'vuex'
import VuexTest from '@/components/VuexTest'
import myModule from '@/store/index'
const localVue = createLocalVue();
localVue.use(Vuex);
describe('VuexTest.vue',()=>{
let getters = myModule.getters;
let state;
let store;
let mutations;
beforeEach(()=>{
state = {
count: 0
}
mutations = {
increment(state) {
state.count++;
}
}
store = new Vuex.Store({
modules: {
state,
mutations,
getters,
}
})
})
it('Vuex 衬着监测',()=>{
const wrapper = shallow(VuexTest,{store,localVue});
const span = wrapper.find('span');
expect( Number(span.text()) ).to.equal(state.count)
})
it('Vuex 事宜监测',()=>{
mutations.increment(state)
expect(state.count).to.equal(1);
})
})
在运用vue时固然也要斟酌vuex的测试,这是运用createLocalVue要领组织一个部分自力作用于的vue环境,防止影响到全局的Vue环境,而 shallow 建立一个包括被挂载和衬着的 Vue 组件的 Wrapper,差别的是被存根的是子组件,基础和 mount 差不多,然则官方demo 运用的是shallowmount,然则现实测试中就是报错,然后换成了shallow。接着测试内里也要构建一个 vuex 的store堆栈,这里还引入了项目内里的store,并将其getters赋值给测试里的getters,如许就能够确保断言的效果是我们项目中设定的。
结语申明
毕竟第一次写单元测试,相识的东西并不深切,详细感兴趣的同砚能够好好看看上述的测试框架及文档,这几个库的api可谓雄厚。本次重要供应可运用,可运转的单元测试代码,不足之处,迎接指出。后续会更新其他的测试场景。
git代码地点 https://github.com/1533266567…