這篇文章主要講解了解決Vue單元測試的問題，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設、做網(wǎng)站、維西網(wǎng)絡推廣、重慶小程序開發(fā)、維西網(wǎng)絡營銷、維西企業(yè)策劃、維西品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供維西建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
一、寫在前面
這篇文章的代碼使用karma，mocha，chai，sinon-chai配合Vue的實例屬性進行單元測試
二、全局的組件的坑
由于我的g-icon是全局注冊的，所以使用g-input組件時的時候g-icon是直接用的，所以測試時有關icon的代碼永遠是錯的。
把g-icon局部注冊的組件
三、在測試中觸發(fā)點擊事件
模擬我在app.vue里使用g-input組件
使用new event 和 dispatch 模擬事件在組件上觸發(fā)，雖然這個事件和我們實際的事件不一樣，但名字一樣就夠了，測試回調(diào)函數(shù)自帶的參數(shù)
重慶分公司
重慶分公司
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");
});
});測試這個組件事件觸發(fā)時，回調(diào)的參數(shù)，由于自定義事件沒有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 = `
`;
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 = `
`;
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代碼是同步的，兩個鉤子分別在這兩段代碼后執(zhí)行，鉤子異步執(zhí)行的。
由于我們在g-row組件中有mounted鉤子，所以我們必須得進行異步檢測，否則我們在new Vue之后立馬進行測試，鉤子還沒執(zhí)行完。
mocha異步測試
mocha默認不執(zhí)行異步，加入done參數(shù)，調(diào)用done()就可以
六、垃圾回收
每一個測試完成之后，都要寫下面兩條代碼
vm.$el.remove(); vm.$destroy();
有兩個作用：
雖然js是單線程，但是還有一個dom線程
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)現(xiàn)在我們討論，什么時候div上的函數(shù)被回收
函數(shù)被全局變量div上的onlick引用了
div.remove（）只是在頁面刪掉了，沒有被內(nèi)存刪掉
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)這個函數(shù)并沒有被刪除，函數(shù)是寫在dom上的，div變量只是引用了dom對象
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)div= null和div.remove同時做就可以了，分別從內(nèi)存和dom上刪除了
ie有bug，即使這樣都刪不了，div.onlick = null 可以
看完上述內(nèi)容，是不是對解決Vue單元測試的問題有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
