Vuex + vuex-module-decorators でのactionの単体テストの方法
解決したいこと
Vue.js + TypeScript + Vuexでプロジェクト作成しています。
Vuexをクラス形式で記述するためにvuex-module-decorators
を使用しています。
vuex-module-decoratorsを使用した際にVuexのstateをモック化し、actionの単体テストを行う方法について教えていただきたいです。
以下の環境で開発しています。
- Vue.js: 2.6.19
- Vuex: 3.0.1
- vuex-module-decorators: 0.9.9
- 単体テストユニット: Jest
作成したVuexモジュールと単体テストコード
単体テスト方法を検証するために以下のようにvuex-module-decoratorsを使いVuexモジュールを記述しています。
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();
}
}
単体テストコードを以下のように記述しています。mutationのテストは想定通り作成することができましたが、actionのテストの記述方法が分からないという状態です。
actionの呼び出し部分で下記ソースコード中のコメントのようにエラーが発生します。
import Vuex from "vuex";
import { Counter } from "@/store/modules/counter";
import { createLocalVue } from "@vue/test-utils";
const localVue = createLocalVue();
localVue.use(Vuex);
describe("Counter test", () => {
// mutationのテストは想定通りできています
it("mutation test increment1", () => {
// stateのモック
const mockState = {
count: 0
};
Counter.mutations!.increment(mockState, {});
expect(mockState.count).toBe(1);
});
// actionのテスト
it("action test", () => {
// stateのモック
const mockState = {
count: 3
};
// ここで以下のエラーが発生します。
// Cannot invoke an expression whose type lacks a call signature. Type 'Action<any, any>' has no compatible call signatures.
Counter.actions!.add2(mockState);
expect(mockState.count).toBe(5);
});
});
解決方法や他に良いテスト方法などをご存知の方がいらっしゃいましたら、ご教示お願いいたします。
0
