vue-cli的單元測試的示例解析

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:33:26

vue-cli的單元測試的示例解析

vue-cli的單元測試的示例解析:這篇文章給大家介紹的內(nèi)容是關(guān)于vue-cli的單元測試的示例解析，有著一定的參考價(jià)值，有需要的朋友可以參考一下。vue-cli的單元測試最近項(xiàng)目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測試類的做法，于是乎開始學(xué)習(xí)前端測試之類的文檔。因?yàn)轫?xiàng)目是基

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue-cli的單元測試的示例解析:這篇文章給大家介紹的內(nèi)容是關(guān)于vue-cli的單元測試的示例解析，有著一定的參考價(jià)值，有需要的朋友可以參考一下。vue-cli的單元測試最近項(xiàng)目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測試類的做法，于是乎開始學(xué)習(xí)前端測試之類的文檔。因?yàn)轫?xiàng)目是基

這篇文章給大家介紹的內(nèi)容是關(guān)于vue-cli的單元測試的示例解析，有著一定的參考價(jià)值，有需要的朋友可以參考一下。

vue-cli的單元測試

最近項(xiàng)目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測試類的做法，于是乎開始學(xué)習(xí)前端測試之類的文檔。因?yàn)轫?xiàng)目是基于vue-cli的單頁面，所以想著在此基礎(chǔ)上拓展。

測試框架類型

vue官方提供了幾種測試框架 jest,mocha 等這幾種測試框架，本次案例采用的是 karma + mocha + chai 這個(gè)配套來實(shí)現(xiàn)的。而且還是結(jié)合了 vue-test-utils 這個(gè)官方的測試庫。特別說明，在安裝vue-cli時(shí)在選擇測試類型時(shí)，通過 上下鍵 來選擇對應(yīng)的測試框架

具體案例說明

靜態(tài)文件加載測試

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,通過這個(gè)方法掛載頁面，可以輕松獲取頁面的Dom元素。describe以及it就是mocha的語法，兩者分別接受兩個(gè)參數(shù)。前者是要測試的頁面，后者是測試時(shí)的提示語，然后都接受一個(gè)函數(shù)，在it里面的函數(shù)則是要斷言出你要的結(jié)果，即expect()的內(nèi)容是否等于你想要的結(jié)果。

事件操作測試

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方法模擬點(diǎn)擊操作

異步操作測試

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 這個(gè)方法來確定什么時(shí)候執(zhí)行測試結(jié)束

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 渲染監(jiān)測',()=>{
 const wrapper = shallow(VuexTest,{store,localVue});
 const span = wrapper.find('span');
 expect( Number(span.text()) ).to.equal(state.count)
 })

 it('Vuex 事件監(jiān)測',()=>{
  mutations.increment(state)
  expect(state.count).to.equal(1);
 })
})

在使用vue時(shí)當(dāng)然也要考慮vuex的測試，這是使用createLocalVue方法構(gòu)造一個(gè)局部獨(dú)立作用于的vue環(huán)境，避免影響到全局的Vue環(huán)境，而 shallow 創(chuàng)建一個(gè)包含被掛載和渲染的 Vue 組件的 Wrapper,不同的是被存根的是子組件，基本和 mount 差不多，但是官方demo 使用的是shallowmount，但是實(shí)際測試中就是報(bào)錯(cuò)，然后換成了shallow。接著測試?yán)锩嬉惨獦?gòu)建一個(gè) vuex 的store倉庫，這里還引入了項(xiàng)目里面的store，并將其getters賦值給測試?yán)锏膅etters,這樣就可以確保斷言的結(jié)果是我們項(xiàng)目中設(shè)定的。