一、寫在前面

這篇文章的代碼使用karma，mocha，chai，sinon-chai配合Vue的實例屬性進行單元測試

二、全局的組件的坑

由于我的g-icon是全局注冊的，所以使用g-input組件時的時候g-icon是直接用的，所以測試時有關icon的代碼永遠是錯的。

把g-icon局部注冊的組件

三、在測試中觸發點擊事件

模擬我在app.vue里使用g-input組件

<g-input v-model='message'></g-input>

使用new event 和 dispatch 模擬事件在組件上觸發，雖然這個事件和我們實際的事件不一樣，但名字一樣就夠了，測試回調函數自帶的參數

it('支持事件', () => { ['change', 'input', 'focus', 'blur'].forEach(eventName => { vm = new Constructor({}).$mount(); const callback = sinon.fake(); vm.$on(eventName, callback); let event = new Event(eventName); Object.defineProperty(event, 'target', { value: { value: 'hi' }, enumerable: true }); let inputElement = vm.$el.querySelector('input'); inputElement.dispatchEvent(event); expect(callback).to.have.been.calledWith('hi'); }); });

測試這個組件事件觸發時，回調的參數，由于自定義事件沒有target，我們需要自己寫上去

value: { value: 'hi' }第一個value是defineProperty的

四、Vue的版本

坑來自于下面一段代碼

it('接受gutter', function(done) { Vue.component('g-row', Row); Vue.component('g-col', Col); const div = document.createElement('div'); document.body.appendChild(div); div.innerHTML = ` <g-row gutter='20'> <g-col></g-col> <g-col></g-col> </g-row>`; const vm = new Vue({ el: div }); setTimeout(() => { const row = vm.$el.querySelector('.row'); expect(getComputedStyle(row).marginRight).to.eq('-10px'); expect(getComputedStyle(row).marginLeft).to.eq('-10px'); const cols = vm.$el.querySelectorAll('.col'); expect(getComputedStyle(cols[0]).paddingRight).to.eq('10px'); expect(getComputedStyle(cols[1]).paddingLeft).to.eq('10px'); done(); vm.$el.remove(); vm.$destroy(); }, 0); });

我使用直接在el上寫入template代碼，所以我默認的import Vue from 'vue'（runtimeonly版本）無法編譯這個代碼，import Vue from '../node_modules/vue/dist/vue.esm.js'使用上面引入即可

在沒有template選項是，el不替換

五、異步測試

還是這個代碼，先看以下測試兩個組件關系

it('接受gutter', function(done) { Vue.component('g-row', Row); Vue.component('g-col', Col); const div = document.createElement('div'); document.body.appendChild(div); div.innerHTML = ` <g-row gutter='20'> <g-col></g-col> <g-col></g-col> </g-row>`; const vm = new Vue({ el: div }); setTimeout(() => { const row = vm.$el.querySelector('.row'); expect(getComputedStyle(row).marginRight).to.eq('-10px'); expect(getComputedStyle(row).marginLeft).to.eq('-10px'); const cols = vm.$el.querySelectorAll('.col'); expect(getComputedStyle(cols[0]).paddingRight).to.eq('10px'); expect(getComputedStyle(cols[1]).paddingLeft).to.eq('10px'); done(); vm.$el.remove(); vm.$destroy(); }, 0); });

先說為什么需要seTimeout

從created和mounted鉤子說起，createElement和appendChild在js代碼是同步的，兩個鉤子分別在這兩段代碼后執行，鉤子異步執行的。

由于我們在g-row組件中有mounted鉤子，所以我們必須得進行異步檢測，否則我們在new Vue之后立馬進行測試，鉤子還沒執行完。

mocha異步測試

mocha默認不執行異步，加入done參數，調用done()就可以

六、垃圾回收

每一個測試完成之后，都要寫下面兩條代碼

vm.$el.remove(); vm.$destroy();

有兩個作用：

雖然js是單線程，但是還有一個dom線程

var div = document. getElementById(’xxx’)div.onclick = function() { ///code}setTimeout(function(){ div. remove()}, 3000)

現在我們討論，什么時候div上的函數被回收

函數被全局變量div上的onlick引用了

div.remove（）只是在頁面刪掉了，沒有被內存刪掉

var div = document. getElementById(’xxx’)div.onclick = function() { ///code}setTimeout(function(){ div = mull}, 3000)

這個函數并沒有被刪除，函數是寫在dom上的，div變量只是引用了dom對象

var div = document. getElementById(’xxx’)div.onclick = function() { ///code}setTimeout(function(){ var div2 = document. getElementById(’xxx’)}, 3000)

div= null和div.remove同時做就可以了，分別從內存和dom上刪除了

ie有bug，即使這樣都刪不了，div.onlick = null 可以

到此這篇關于關于Vue單元測試的幾個坑的文章就介紹到這了,更多相關 Vue單元測試 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！