vue.jsユニットテスト - マウントされたフックのエラー

Question

私はユニットテストフレームワークとしてJasmineを使用していますが、vueが正しくマウントされているかどうかをどのように知ることができますか。 VueJSからのAPI、ビューの状態を知るレシートがありますか？ エラー： '[Vue warn]：マウントされたフックのエラー：（xxxxに見つかりました）エラー：エラーが発生しました。 - ReferenceError：$が定義されていません。 '

次に、私の単体テストにこのようなエラーが発生していますか？ここで

は、コードの簡単なスナップショットです：

describe("location component tests suite",() => { 

    const getComponent = (data) => { 
     let vm = new Vue({ 
      template : "<div>" 
       + "<location" 
       + " :data='data'" 
       + " label='pick'" 
       + " placeholder='placeholder'" 
       + " required>" 
       + "</location></div>", 

      data: { 
       data 
      } 
     }); 

     return vm; 
    }; 

    it("Validate mount",() => { 
     const data= { 'data' : { 'value' : 'VUE'} }; 
     const vm = getComponent(data).$mount(); 
     expect(vm.$el.querySelector('div.location-wrapper').getAttribute('class')).toBe('location-wrapper'); 
     expect(vm.$el.querySelector('input').getAttribute('name')).toBe('pick'); 
    }); 
}); 

ありがとうございました！

Answer 1

v2.2.0以降に導入されたVue.config.errorHandler APIを使用するとよいでしょう。

1. 変数をエラー発生フラグ（つまり、errorThrown）として宣言できます。

   let errorThrown = false; 
   

2. それがトリガーだときerrorThrownがtrueに切り替えられますようにErrorHandler関数を定義します。

   Vue.config.errorHandler = function (err, vm, info) { 
       console.log(info); 
       if(info.includes('mounted')) { 
       errorThrown = true; 
       } 
   }; 
   

3. ジャスミンにexpect APIを使用して確認しerrorThrown。

   expect(errorThrown).toBe(false); // Test will fail here 
   

作業デモhereを確認してください。
このようにして、マウントされたメソッドで発生したエラーはキャッチされ、強制的にユニットテストが失敗します。