學習對vue組件進行單元測試，先參照官網編寫組件和測試腳本。
組件無依賴，無props
對於無需導入任何依賴，也沒有props的，直接編寫測試案例即可。
/src/testSrc/simpleComp.vue
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
/test/unit/specs/simpleComp.secs.js
import Vue from 'vue'
import simpleComp from '@/testSrc/simpleComp.vue'
describe('simpleComp', () => {
// 檢查原始組件選項
it('has a created hook', () => {
expect(typeof simpleComp.created).to.eql('function')
})
// 評估原始組件選項中的函數結果
it('sets the correct default data', () => {
expect(typeof simpleComp.data).to.eql('function')
const defaultData = simpleComp.data()
expect(defaultData.message).to.eql('hello!')
})
// 檢查 mount 中的組建實例
it('correctly sets the message when created', () => {
const vm = new Vue(simpleComp).$mount()
expect(vm.message).to.eql('bye!')
})
// 創建一個實例並檢查渲染輸出
it('renders the correct message', () => {
const Constructor = Vue.extend(simpleComp)
const vm = new Constructor().$mount()
expect(vm.$el.textContent).to.eql('bye!')
})
})
describe('', () => {// describe塊
it('', () => { //一個it塊代表一個測試用例
})
// 多個it塊構成了test suite【測試套件】
})
我在測試的時候是一個it塊一個it塊的增加，每編寫完成一個it塊，就保存並查看【#karma start】監控的運行結果。大概就是webpack compile 成功與否，測試用例在各瀏覽器的運行情況，代碼覆蓋率總結報告。
這里應該是 8 SUCCESS, 忘記截圖了。Statements表示“聲明”，Branches表示分支，Functions表示方法，Lines表示行的覆蓋率。
2、有入參的組件
組件有props
對於組件需要props，編寫單元測試時，通過propsData傳遞該參數。
/src/testSrc/propComp.vue
<template>
<p>{{ msg }}</p>
</template>
<script>
export default {
props: ['msg']
}
</script>
/test/unit/specs/propComp.specs.js
/**
* 組件需要 props 時，通過 propsData 傳遞該參數
*/
import Vue from 'vue'
import propComp from '@/testSrc/propComp.vue'
function getRenderedText (Component, propsDataMsg) {
const Ctor = Vue.extend(Component)
const vm = new Ctor({ propsData: propsDataMsg }).$mount()
return vm.$el.textContent
}
describe('propComp', () => {
it('renders correctly with different props', () => {
expect(getRenderedText(propComp, {
msg: 'Hello'
})).to.eql('Hello')
expect(getRenderedText(propComp, {
msg: 'Bye'
})).to.eql('Bye')
})
})
3、有依賴其他組件的組件【TODO-->未解決，會報錯還沒理解】
若組件存在依賴，則可通過inject-loader解決。inject-loader可將任意依賴項注入到*.vue組件中。
/src/testSrc/dependencyComp.vue
<template>
<div class="msg">
{{ msg }}
</div>
</template>
<script>
// this dependency needs to be mocked
import SomeService from '../service'
export default {
data () {
return {
msg: SomeService.msg
}
}
}
</script>
/test/unit/specs/dependencyComp.specs.js
import Vue from 'vue'
// "!!"表示禁用全局配置的所有loaders。“vue-loader?inject!”表示使用vue-loader，傳入inject參數
const ExampleInjector = require('!!vue-loader?inject!./example.vue')
// 運行ExampleInjector函數返回一個denpendencyComp的實例，該實例中denpendencyComp組件的依賴項已被模擬
const ExampleWithMocks = ExampleInjector({
// mock it
'../service': {
msg: 'Hello from a mocked service!'
}
})
describe('dependencyComp', () => {
it('should render', () => {
const vm = new Vue({
template: '<div><test></test></div>',
components: {
'test': ExampleWithMocks
}
}).$mount()
expect(vm.$el.querySelector('.msg').textContent).to.eql('Hello from a mocked service!')
})
})
4、有異步操作的組件
對於異步操作，it塊執行的時候，需要傳入一個回調函數，通常該函數被命名為done。當測試結束的時候，必須顯式調用這個函數【done()】，告訴Mocha測試結束了。否則，Mocha就無法知道，測試是否結束，會一直等到超時報錯。
就用之前編寫的簡單的組件，增加測試用例 —— it塊就行了。
/src/testSrc/simpleComp.vue
【見1、簡單的組件】
更新 /test/unit/specs/simpleComp.specs.js
// 新增一個it塊
// 異步操作：在狀態更新后檢查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
const vm = new Vue(simpleComp).$mount()
vm.message = 'foo'
// 在狀態改變后和斷言 DOM 更新前等待一刻
Vue.nextTick(() => {
expect(vm.$el.textContent).to.eql('foo')
done() //顯示調用結束函數done()，告訴mocha異步操作結束
})
})
#karma start
實際上總共只有7個測試用例（即7個it塊），但是我配置瀏覽器的時候配置了兩個（Chrome、FireFox），每個而是用例都會在它們兩個瀏覽器運行，故而總共運行了14個。
資料：
1、Vue單元測試---Karma+Mocha+Chai實踐