Vuex + TypeScript + vuex-module-decoratorsでのmutationとgetterの単体テスト

やりたいこと

vuex-module-decoratorsを使うことで、TyepScriptでVuexを記述する際により型付けの恩恵を受けられるようになります。この記事ではvuex-module-decoratorsを使った際のVuexのmutationとgetterのJestでの単体テストの記述方法を紹介したいと思います。

以下の環境で動作検証しています。

• Vue.js: 2.6.19
• Vuex: 3.0.1
• vuex-module-decorators: 0.9.9
• 単体テストユニット: Jest

テスト対象のVuex

テスト対象として以下のVuexを作成します。

counter.ts

import { Action, Module, Mutation, VuexModule } from "vuex-module-decorators";

@Module({ name: "counter", namespaced: true })
export class Counter extends VuexModule {

  // state
  private count: number = 0;

  // mutaion
  // カウンターをインクリメントする
  @Mutation
  public increment(): void {
    this.count++;
  }

  // getter
  //　カウンターの値を取得
  get getCount() {
    return this.count;
  }

  // action
  // カウンターの値を2インクリメントするアクション
  @Action({})
  public add2(): void {
    this.increment();
    this.increment();
  }
}

Jestでの単体テスト

以下のように単体テストを記述できます。ポイントとしては、Counter.mutations!.increment(mockState, {})のようにモック化したstateに対してmutation, getterを実行することでテストケースごとに別のステートを使用している点です。

テストケースごとにステートの値を変更できる点と、mutaionとgetterを独立してテストできる点がメリットです。

counter.spec.ts

import Vuex from "vuex";
import { Counter } from "@/store/modules/counter";
import { createLocalVue } from "@vue/test-utils";
import { cloneDeep } from "lodash";
import { Action, getModule } from "vuex-module-decorators";

// ローカルのVueインスタンを使用する
const localVue = createLocalVue();
localVue.use(Vuex);

describe("Counter test", () => {

  // mutationnのテスト
  it("mutation test increment1", () => {
  
    // ステートをモック化
    const mockState = {
      count: 0
    };

    Counter.mutations!.increment(mockState, {});
    expect(mockState.count).toBe(1);
  });

  // mutationnのテスト
  it("mutation test increment2", () => {
  
    // ステートをモック化
    const mockState = {
      count: 0
    };

    // テストケースごとに別のモック化したステートを使用できる
    expect(mockState.count).toBe(0);
    Counter.mutations!.increment(mockState, {});
    Counter.mutations!.increment(mockState, {});
    expect(mockState.count).toBe(2);
  });

  // getterのテスト
  it("getter test", () => {
  
    // ステートをモック化、カウンターの初期値を変更
    const mockState = {
      count: 3
    };
    
    expect(Counter.getters!.getCount(mockState, null, null, null)).toBe(3);
  });
});

おわりに

actionも同様にモック化したstatenを使用してテストしたかったのですが、記述方法がわかりませんでした。ご存知の方がいらっしましたら教えていただけると嬉しいです。