搞了一個(gè)vue項(xiàng)目卖哎，擼測(cè)試的時(shí)候發(fā)現(xiàn)網(wǎng)上的例子大多只有起步案例，看完之后录淡，依然撓頭捌木，不知如何下手。xiaozhang愚鈍嫉戚，自己慢慢整理了一下刨裆，以實(shí)際項(xiàng)目中的案例來講解vue項(xiàng)目的測(cè)試，項(xiàng)目中使用了國(guó)際化（i18n）以及UI組件element彬檀。
首先是測(cè)試環(huán)境帆啃，使用腳手架搭建的項(xiàng)目自帶了單元測(cè)試環(huán)境是： Karma + mocha + chai 的組合，這里我們不多說了窍帝，mocha的講解呢可以自行百度學(xué)習(xí)努潘，我使用的感覺就是這東東非常的像jasmine（簡(jiǎn)直是一毛一樣好吧....）
所以捏，建好的項(xiàng)目可以直接運(yùn)行下面的命令行來執(zhí)行自帶的測(cè)試案例
npm run unit
然后我們簡(jiǎn)單看下vue官方的一個(gè)案例：（增加了我的說明）
// 導(dǎo)入 Vue.js 和被測(cè)試組件坤学，進(jìn)行測(cè)試
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
//每一個(gè)測(cè)試文件中可以包含一個(gè)或者多個(gè)describe疯坤， 測(cè)試案例集合的概念
describe('這里可以寫任何你想寫的話，直接寫組件名稱', () => {
beforEach() => {
//這里的代碼將會(huì)在每一個(gè)it 案例執(zhí)行前被執(zhí)行深浮，我們可以在這做一些初始化工作
const Ctor = Vue.extend(MyComponent)
const vm = new Ctor().$mount()
}
afterEach() => {
//這里的代碼會(huì)在每一個(gè)it案例之后被執(zhí)行压怠，一般用以清理工作
vm.$destroy && vm.$destroy();
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
}
// 創(chuàng)建一個(gè)實(shí)例并檢查渲染輸出
it('這里可以人一些，建議描述案例目的', () => {
//這里就是測(cè)試案例的內(nèi)容了
expect(vm.$el.textContent).to.be('bye!')
})
})
通過這個(gè)案例基本可以掌握vue測(cè)試的基礎(chǔ)了略号，每一個(gè)測(cè)試文件的結(jié)構(gòu)都是這樣的刑峡。 然后我們?cè)趯?shí)際項(xiàng)目中，一般都會(huì)有國(guó)際化資源玄柠，或者引用一些UI組件突梦。我的項(xiàng)目中就使用了element 組件。那么這樣的項(xiàng)目怎么測(cè)試嘞羽利？
實(shí)際上宫患，只要搞懂一個(gè)點(diǎn)就ok： 測(cè)試環(huán)境中的vue 跟開發(fā)環(huán)境中的vue一點(diǎn)關(guān)系都沒有， 所以相關(guān)的掛載要在測(cè)試環(huán)境中再次的掛載一遍这弧。
所以我們的項(xiàng)目中抽出了一個(gè)TestUtil.js 文件娃闲，以此來完成測(cè)試的初始化工作。文件內(nèi)容如下：
/**
* Created by xiaozhang on 2017/11/13.
*/
//引入需要的依賴 項(xiàng)目中資源文件是單獨(dú)引入的匾浪，所以這里也單獨(dú)引入
import '../../../../static/nls/zh-CN.js'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
Vue.use(Element, { size: 'mini' })
Vue.use(VueI18n)
//僅作測(cè)試皇帮，所以這里直接聲明任何一種語(yǔ)言都可以
const i18n = new VueI18n({
locale : 'zh-CN', //當(dāng)前語(yǔ)言標(biāo)識(shí)
messages : {
'zh-CN' : window.locales
}
});
/**
* 創(chuàng)建一個(gè) Vue 的實(shí)例對(duì)象
* @param {Object|String} Component 組件配置，可直接傳 template
* @param {Object|String} propsData 組件配置蛋辈，設(shè)置傳入組件的參數(shù)
* @return {Object} vm
*/
function getRenderedVm (Component, propsData) {
const Ctor = Vue.extend(Component);
const vm = new Ctor({ i18n,propsData }).$mount(); //這里要掛載i18n
return vm;
}
/**
* 回收 vm
* @param {Object} vm
*/
function destroyVM (vm) {
vm.$destroy && vm.$destroy();
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
};
//這里拋出兩個(gè)方法属拾，方便測(cè)試案例中調(diào)用
module.exports = {
getRenderedVm : getRenderedVm,
destroyVM : destroyVM
}
那么這個(gè)文件就幫我們完成了大部分的測(cè)試初始化工作将谊，然后我們的測(cè)試文件就可以直接引用這個(gè)文件了，代碼如下：
// 導(dǎo)入測(cè)試工具類 和被測(cè)試組件渐白，進(jìn)行測(cè)試
import {getRenderedVm,destroyVM} from './utils/TestUtils'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent,vue', () => {
beforEach() => {
let prop = {key: ‘message’};
vm = getRenderedVm(MyComponent , prop);
}
afterEach() => {
destroyVM(vm)尊浓；
}
it('rander dom', () => {
//這里就是測(cè)試案例的內(nèi)容了
expect(vm.$el.textContent).to.be('bye!')
})
})
這樣基本的結(jié)構(gòu)就完事了， 具體怎么測(cè)試組件纯衍，這個(gè)需要看組件的具體實(shí)現(xiàn)了栋齿。通常可以從以下兩個(gè)點(diǎn)來考慮：
1襟诸、斷言重要的dom元素已經(jīng)渲染了
expect(vm.$el.querySelector('.className')).to.exist;
2瓦堵、斷言組件中的事件正確的執(zhí)行了。
vm.$el.querySelector('.className').click(); //觸發(fā)事件
expect(vm.$el.querySelector('.className')).to.be("這里是結(jié)果");
以上是寫vue項(xiàng)目中測(cè)試案例需要的點(diǎn)励堡，參考了以下內(nèi)容：
vue官方文檔
入門vue測(cè)試(需翻墻)
