Vue Test Utils にてコンポーネントを遅延読み込みしている際に出る Vue warn への対応

#結論 コンポーネントをマウントするときに stubs プロパティを用いて明示的にスタブ化する。

具体例

以下のような感じでコンポーネントを遅延読み込みしているとします。

  components: {
    ChienComponent: () => import("path/to/chien_component")
  },

このとき、テスト側では次のようにマウントします。

    wrapper = shallowMount(YourComponent, {
      // (省略)     
      stubs: {
        ChienComponent: true
      }
    });

結果、テスト上の HTML ではちゃんとスタブ化されています。console.log(wrapper.html()) で確認できます。

          <chien-component-stub hoge="[object Object]"></chien-component-stub>

補足

単体テストでは、原則としてそのコンポーネントだけが関心の対象となるのでこれで良いと思います*1

*1:ここらへんは状況によるので色々あると思います

Powered by はてなブログ