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可谓丰富。

相关推荐：

Vue中class与style绑定以及条件与列表渲染的分析

Javascript和jQuery获取对象的方法