this.$storeを参照している子コンポーネントを単体でテストする | Vuex + vue-test-utils その0002

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

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

はじめに

子コンポーネント単体でテストをしたいけど、this.$storeを参照しているcomputedなどがあり、テスト実行時にエラーが出たのでどうにかしたかったという経緯があります。

サンプルコード

公式ドキュメントの「マウンティングオプション | Vue Test Utils」にある通り、mocksを使います。

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';

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,
      },
      propsData: {
        // 〜略〜
      },
    });
  });

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