這篇文章要跟大家介紹的內容是關於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-cli的單元測試的範例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
