資訊專欄INFORMATION COLUMN
摘要：的單元測(cè)試最近項(xiàng)目開(kāi)發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測(cè)試類的做法，于是乎開(kāi)始學(xué)習(xí)前端測(cè)試之類的文檔。本次主要提供可使用，可運(yùn)行的單元測(cè)試代碼，不足之處，歡迎指出。
vue-cli的單元測(cè)試
最近項(xiàng)目開(kāi)發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測(cè)試類的做法，于是乎開(kāi)始學(xué)習(xí)前端測(cè)試之類的文檔。因?yàn)轫?xiàng)目是基于vue-cli的單頁(yè)面，所以想著在此基礎(chǔ)上拓展。
測(cè)試框架類型vue官方提供了幾種測(cè)試框架 jest,mocha 等這幾種測(cè)試框架，本次案例采用的是 karma + mocha + chai 這個(gè)配套來(lái)實(shí)現(xiàn)的。而且還是結(jié)合了 vue-test-utils 這個(gè)官方的測(cè)試庫(kù)。特別說(shuō)明，在安裝vue-cli時(shí)在選擇測(cè)試類型時(shí)，通過(guò) 上下鍵 來(lái)選擇對(duì)應(yīng)的測(cè)試框架
具體案例說(shuō)明靜態(tài)文件加載測(cè)試
import Vue from "vue"
import Test from "@/components/Test"
import {mount} from "vue-test-utils"
describe("Test.vue",()=>{
it("頁(yè)面加載成功",()=>{
const wrapper = mount(Test);
expect(wrapper.find("h1").text()).to.equal("My First UnitTest");
})
})
首頁(yè)引入要測(cè)試的文件以及vue-test-utils提供的方法mount,通過(guò)這個(gè)方法掛載頁(yè)面，可以輕松獲取頁(yè)面的Dom元素。describe以及it就是mocha的語(yǔ)法，兩者分別接受兩個(gè)參數(shù)。前者是要測(cè)試的頁(yè)面，后者是測(cè)試時(shí)的提示語(yǔ)，然后都接受一個(gè)函數(shù)，在it里面的函數(shù)則是要斷言出你要的結(jié)果，即expect()的內(nèi)容是否等于你想要的結(jié)果。
事件操作測(cè)試
import Vue from "vue"
import Event from "@/components/Event"
import { mount } from "vue-test-utils"
describe("Event.vue",()=>{
it("事件方法測(cè)試",()=>{
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)擊操作
異步操作測(cè)試
import Vue from "vue"
import {mount,shallow} from "vue-test-utils"
import AsyncEvent from "@/components/AsyncEvent"
describe("AsyncEvent.vue",()=>{
it("異步行為測(cè)試",(done)=>{
const wrapper = mount(AsyncEvent);
wrapper.find("button").trigger("click");
setTimeout(()=> {
expect( Number(wrapper.find("span").text()) ).to.equal(2);
done();
}, 1000)
})
})
這里使用setTimeout來(lái)做異步測(cè)試，注意的是這里要使用 done 這個(gè)方法來(lái)確定什么時(shí)候執(zhí)行測(cè)試結(jié)束
VUEX測(cè)試
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)測(cè)",()=>{
const wrapper = shallow(VuexTest,{store,localVue});
const span = wrapper.find("span");
expect( Number(span.text()) ).to.equal(state.count)
})
it("Vuex 事件監(jiān)測(cè)",()=>{
mutations.increment(state)
expect(state.count).to.equal(1);
})
})
在使用vue時(shí)當(dāng)然也要考慮vuex的測(cè)試，這是使用createLocalVue方法構(gòu)造一個(gè)局部獨(dú)立作用于的vue環(huán)境，避免影響到全局的Vue環(huán)境，而 shallow 創(chuàng)建一個(gè)包含被掛載和渲染的 Vue 組件的 Wrapper,不同的是被存根的是子組件，基本和 mount 差不多，但是官方demo 使用的是shallowmount，但是實(shí)際測(cè)試中就是報(bào)錯(cuò)，然后換成了shallow。接著測(cè)試?yán)锩嬉惨獦?gòu)建一個(gè) vuex 的store倉(cāng)庫(kù)，這里還引入了項(xiàng)目里面的store，并將其getters賦值給測(cè)試?yán)锏膅etters,這樣就可以確保斷言的結(jié)果是我們項(xiàng)目中設(shè)定的。
結(jié)語(yǔ)說(shuō)明畢竟第一次寫(xiě)單元測(cè)試，了解的東西并不深入，具體感興趣的同學(xué)可以好好看看上述的測(cè)試框架及文檔，這幾個(gè)庫(kù)的api可謂豐富。本次主要提供可使用，可運(yùn)行的單元測(cè)試代碼，不足之處，歡迎指出。后續(xù)會(huì)更新其他的測(cè)試場(chǎng)景。
git代碼地址 https://github.com/1533266567...
https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110143.html
摘要：還可以自動(dòng)完成單元測(cè)試的配置，工具選型為準(zhǔn)備出發(fā)有了以上的初步了解，我們就可以準(zhǔn)備著手搭建我們自己的測(cè)試環(huán)境了，讓我們短暫休息一下，下一章見(jiàn)下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架二 搭建自己的前端自動(dòng)化測(cè)試腳手架（一） LancerComet at 17:55, 2016.07.17.歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 隨著前端項(xiàng)目規(guī)模的日益膨脹，自動(dòng)化測(cè)試越來(lái)越受到廣大前端與測(cè)試朋友關(guān)...
摘要：目前半島局勢(shì)緊張，朝鮮已進(jìn)行了六次核試驗(yàn)，被廣泛認(rèn)為已經(jīng)擁有了核彈頭。另外朝鮮的導(dǎo)彈技術(shù)今年以來(lái)快速突破，成功試射了射程可覆蓋美國(guó)本土的洲際彈道導(dǎo)彈。這個(gè)版的內(nèi)容傳到互聯(lián)網(wǎng)上后，迅速刷屏，引起紛紛議論。 SplderApi2 Node-SplderApi2 第二版 基于Node 的網(wǎng)絡(luò)爬蟲(chóng) API接口 包括前端開(kāi)發(fā)日?qǐng)?bào)、kugou音樂(lè)、前端top框架排行、妹紙福利、搞笑視頻、段子笑話、...
摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...
摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測(cè)試在如今前端技術(shù)飛速發(fā)展的時(shí)代，和作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試 在如今前端技術(shù)飛速發(fā)展的時(shí)代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國(guó)鼎立的局面。作為國(guó)人若你不知道 vue，小生表示可以理解，如果作為中國(guó)的前端猿不知道 vue，...
閱讀 1408·2021-10-14 09:43
閱讀 1003·2021-09-10 10:51
閱讀 1453·2021-09-01 10:42
閱讀 2199·2019-08-30 15:55
閱讀 593·2019-08-30 15:55
閱讀 2352·2019-08-30 14:21
閱讀 1724·2019-08-30 13:04
閱讀 3475·2019-08-29 13:09
