書接上文，karma+webpack搭建vue單元測試環境介紹了vue單元測試環境搭建及查看源文件的測試覆蓋覆蓋率。今天來說一下vue單元測試思路和case的寫法。測試框架使用jasmine，語法參考。
代碼地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo
測試關注點
對于vue組件，單元測試測試主要關注以下幾點：
組件加載后的狀態
要測試組件加載后的狀態，首先我們需要將vue組件生成實例。并檢測掛載后實例的數據狀態。下面是個示例：
我們來看下src/app.vue組件的代碼：
<template> <div> <h1>{{title}}</h1> <vc-message :message="message"></vc-message> </div></template><script> import child from './components/child.vue' export default { data() { return { title: '標題', message: '這是子組件' } }, components: { 'vc-message': child }, mounted() { this.title = 'Hello world' }, methods: { setMessage(msg) { this.message = msg; } } }</script>組件加載后title的值應該變成'Hello world'，所以我們這樣來寫測試代碼
// 引用vueimport Vue from 'vue';// 引用要測試的組件import app from '../../src/app.vue';// 描述要測試的內容describe('test app.vue', () => { // 描述要測試的最小單元 it('組件加載后，title應該是Holle world', () => { // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態 let vm = new Vue(app).$mount(); // 斷言組件的title是否變為了'Hello world' expect(vm.title).toEqual('Hello world'); });});執行karma start我們能看到測試通過。
測試組件里面的方法
我們知道vue將data和methods都掛在了vue實例的根節點下，所以測試vue組件中的方法也和上面測試狀態一樣，直接調用vm的方法就行了。我們來測試以下setMessage方法：
// 引用vueimport Vue from 'vue';// 引用要測試的組件import app from '../../src/app.vue';// 描述要測試的內容describe('test app.vue', () => { // 描述要測試的最小單元 it('設置message為『你好世界』', () => { // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態 let vm = new Vue(app).$mount(); // 執行setMessage方法 vm.setMessage('你好世界'); // 斷言組件的message是否變為了'你好世界' expect(vm.message).toEqual('你好世界'); });});執行karma start，就會看到測試成功。如果剛才沒有關閉karma的話，在watch模式下，測試會自動進行。
怎么樣？有沒有感覺vue單元測試非常簡單，趕緊做起來吧。
filter測試
filter的測試就更簡單了。filter就是純函數，有固定的輸入輸出，我們只需要執行函數看預期結果就好了。我們為組件添加一個轉換大寫的filter:
<template>... <h1>{{title | upperCase}}</h1>...</template><script>... filters: { upperCase(str) { return str.toUpperCase(); } }...</script>測試這個filter
// 引用要測試的組件import app from '../../src/app.vue';// 描述要測試的內容describe('test app.vue', () => { it('upperCase過濾器能把app轉換為APP', () => { // vue 組件export出來的是個對象，我們直接用這個對象的屬性和方發就能調用到要測試的filter let appStr = app.filters.upperCase('app'); // 斷言組件的appStr是為'APP' expect(appStr).toEqual('APP'); });})props測試
props依賴父組件，這個怎么測試呢。我們來看下vue官方提供的方法
使用Vue.extend()將組件掛載Vue構造器上，用propsData加入props數據，之后new一個Vue實例，這樣就生成了一個獨立的帶props的vm和前面的實例一樣，可以進行各種測試。
我們的child組件：
<template> <div> <div>{{message}}</div> </div></template><script> export default { props: ['message'] }</script>測試child組件
// 引用vueimport Vue from 'vue';// 引用要測試的組件import child from '../../src/components/child.vue';/** * 獲取生成的vm * * @param {Object} Component 組件 * @param {Object} propsData props數據 * @return {Object} vue實例 */function getRenderedVm (Component, propsData) { const Ctor = Vue.extend(Component) const vm = new Ctor({ propsData }).$mount() return vm}// 描述要測試的內容describe('test child.vue', () => { // 描述要測試的最小單元 it('組件加載后，child組件的message應該是「這是子組件」', () => { let childvm = getRenderedVm(child, { message: '這是message' }); // 斷言組件的child組件的props是否生效 expect(childvm.message).toEqual('這是message'); });});是不是so easy.
異步更新DOM的情況
異步更新DOM的情況，參考vue官網的示例
使用Vue.nextTick來查看異步數據更新后dom是否變化
// 引用vueimport Vue from 'vue';// 引用要測試的組件import app from '../../src/app.vue';// 描述要測試的內容describe('test app.vue', () => { // 異步數據更新 it('數據更新后，視圖應該改變', done => { // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態 let vm = new Vue(app).$mount(); // 掛載后改變title vm.title = 'APP'; Vue.nextTick(() => { let title = vm.$el.getElementsByTagName('h1')[0] expect(title.textContent).toEqual('APP') done(); }) });});以上就是對vue組件單元測試的用例編寫的介紹，例子舉得比較簡單，主要是介紹各種情況的測試方法。
相關鏈接
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
