解決Vue單元測(cè)試的問(wèn)題

發(fā)布時(shí)間：2020-07-30 14:33:57 來(lái)源：億速云閱讀：218 作者：小豬欄目：web開(kāi)發(fā)

這篇文章主要講解了解決Vue單元測(cè)試的問(wèn)題，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

一、寫在前面

這篇文章的代碼使用karma，mocha，chai，sinon-chai配合Vue的實(shí)例屬性進(jìn)行單元測(cè)試

二、全局的組件的坑

由于我的g-icon是全局注冊(cè)的，所以使用g-input組件時(shí)的時(shí)候g-icon是直接用的，所以測(cè)試時(shí)有關(guān)icon的代碼永遠(yuǎn)是錯(cuò)的。

把g-icon局部注冊(cè)的組件

三、在測(cè)試中觸發(fā)點(diǎn)擊事件

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

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

使用new event 和 dispatch 模擬事件在組件上觸發(fā)，雖然這個(gè)事件和我們實(shí)際的事件不一樣，但名字一樣就夠了，測(cè)試回調(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");
   });
  });

測(cè)試這個(gè)組件事件觸發(fā)時(shí)，回調(diào)的參數(shù)，由于自定義事件沒(méi)有target，我們需要自己寫上去

value: { value: "hi" }第一個(gè)value是defineProperty的

四、Vue的版本

坑來(lái)自于下面一段代碼

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代碼，所以我默認(rèn)的import Vue from "vue"（runtimeonly版本）無(wú)法編譯這個(gè)代碼，import Vue from "../node_modules/vue/dist/vue.esm.js"使用上面引入即可

在沒(méi)有template選項(xiàng)是，el不替換

五、異步測(cè)試

還是這個(gè)代碼，先看以下測(cè)試兩個(gè)組件關(guān)系

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);
 });

先說(shuō)為什么需要seTimeout

從created和mounted鉤子說(shuō)起，createElement和appendChild在js代碼是同步的，兩個(gè)鉤子分別在這兩段代碼后執(zhí)行，鉤子異步執(zhí)行的。

由于我們?cè)趃-row組件中有mounted鉤子，所以我們必須得進(jìn)行異步檢測(cè)，否則我們?cè)趎ew Vue之后立馬進(jìn)行測(cè)試，鉤子還沒(méi)執(zhí)行完。

mocha異步測(cè)試

mocha默認(rèn)不執(zhí)行異步，加入done參數(shù)，調(diào)用done()就可以

六、垃圾回收

每一個(gè)測(cè)試完成之后，都要寫下面兩條代碼

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

有兩個(gè)作用：

銷毀在頁(yè)面中的數(shù)據(jù)
銷毀在內(nèi)存的數(shù)據(jù)

雖然js是單線程，但是還有一個(gè)dom線程

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

現(xiàn)在我們討論，什么時(shí)候div上的函數(shù)被回收

函數(shù)被全局變量div上的onlick引用了

div.remove（）只是在頁(yè)面刪掉了，沒(méi)有被內(nèi)存刪掉

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

這個(gè)函數(shù)并沒(méi)有被刪除，函數(shù)是寫在dom上的，div變量只是引用了dom對(duì)象

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

div= null和div.remove同時(shí)做就可以了，分別從內(nèi)存和dom上刪除了

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

看完上述內(nèi)容，是不是對(duì)解決Vue單元測(cè)試的問(wèn)題有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

解決Vue單元測(cè)試的問(wèn)題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽