时间:2021-07-01 10:21:17 帮助过:7人阅读
最近项目开发临近结尾,反思之前做的不足的地方,想着应该引入测试类的做法,于是乎开始学习前端测试之类的文档。因为项目是基于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绑定以及条件与列表渲染的分析
以上就是vue-cli的单元测试的示例解析的详细内容,更多请关注Gxl网其它相关文章!