任意の子コンポーネントを入れ子にしてテストする | Vuex + vue-test-utils その0003

参考にさせて頂いたページ

• マウンティングオプション | Vue Test Utils

はじめに

テスト対象のコンポーネント内部に子コンポーネントを配置していて、shallowMount()の引数として特に設定を追加していない場合は、本来自分が配置しているコンポーネントではなくstubコンポーネントが自動的に挿入されます。

実際の挙動をテストしたいときに、任意のコンポーネントを配置する方法について書きます。

サンプルコード

公式ドキュメントの「マウンティングオプション | Vue Test Utils」のstubsを使用します。

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
// modules
import myComponentModule from '@/javascripts/my_component_module.js'

// components
import MyComponent from '@/javascripts/my_component.vue';
import MyChildComponent from '@/javascripts/my_child_component.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('my_component.vueのテスト', () => {
  let $store;
  let wrapper;

  beforeEach(() => {
    // 本来のthis.$storeに入るものと同様のオブジェクト構造を作成
    $store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
        myComponentModule,
      },
    });

    wrapper = shallowMount(MyComponent, {
      mocks: {
        // 本来rootコンポーネントに設定するthis.$storeを使えるように設定
        $store,
      },
      stubs: {
        // ここに子コンポーネントを渡す
        MyChildComponent,
      },
      propsData: {
        // 〜略〜
      },
    });
  });

  it('テストタイトル', () => {
    // 何かテスト
  });
});