Vueユニットテストに関するいくつかのピット

一、前に書いてください
この文章のコードはkama、mocha、chai、sinon-chaiを使って、Vueの実例的な属性に合わせてユニットテストを行います。
二、グローバルのコンポーネントのピット
私のg-inconはグローバル登録なので、g-inputコンポーネントを使う時はg-inconが直接使うので、テスト時のiconに関するコードは永遠に間違っています。
g-incon部分登録のコンポーネント
三、テスト中にイベントをクリックします。
シミュレーション私はap.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);
 });

私は直接にtemplateコードを書き込みますので、デフォルトのimport Vue from「vue」はこのコードをコンパイルすることができません。import Vue from./。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とapendChildは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ユニットのテスト内容については、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。