【Vue Test Utils】`shallowMount + stubs` で子コンポーネントを含めてテストを良い感じにする

はじめに

vue-test-utils で子コンポーネントも見たかったので mount を使ってテストしていましたが、やたら時間がかかってタイムアウトになってしまいます。

なので、渋々 shallowMount に変更して子コンポーネントも一緒に使えないか調べました。

shallowMount + stubs で良い感じになる

import Foo from './Foo.vue'

mount(Component, {
  stubs: ['registered-component']
})

shallowMount(Component, {
  stubs: {
    // 特定の実装によるスタブ
    'registered-component': Foo,
    // デフォルトのスタブを作成します。
    // このケースではデフォルトのスタブのコンポーネント名は another-component です。
    // デフォルトのスタブは <${デフォルトのスタブのコンポーネント名}-stub> です。
    'another-component': true
  }
})

引用元：https://vue-test-utils.vuejs.org/ja/api/options.html#stubs