问：Vuex-module-decorators：如何使用玩笑来测试Vuex动作？

如何解决问：Vuex-module-decorators：如何使用玩笑来测试Vuex动作？

我想使用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 {
  private count: number = 0;

  @Mutation
  public increment(): void {
    this.count++;
  }

  get getCount() {
    return this.count;
  }

  @Action({})
  public add2(): void {
    this.increment();
    this.increment();
  }
}

我的测试代码如下。 “变异测试”和“ getter测试”的工作。 但是我不知道如何测试动作。我无法正确执行动作“ add2”。 有人知道如何测试动作吗？

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",() => {
  it("mutation test",() => {
    const mockState = {
      count: 0
    };

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

  it("getter test",() => {
    const mockState = {
      count: 3
    };

    expect(Counter.getters!.getCount(mockState,null,null)).toBe(3);
  });

  it("action test",() => {
    const mockState = {
      count: 3
    };

    // IntelliJ show error message
    // "Cannot invoke an expression whose type lacks a call signature. Type 'Action ' has no compatible call signatures."
    Counter.actions!.add2();

    expect(mockState.count).toBe(4);
  });
});

解决方法

尝试挂载 store 并对其进行测试，而不是直接测试模块，如下所示：

const store = new Vuex.Store({
  modules: {
    counter: Counter
  }
})


it('should foo',() => {
  store.dispatch('counter/add2')

  expect(store.state.counter.count).toBe(4);
})

避免在测试之间共享状态也很有用，像这样使用 stateFactory 标志：

@Module({ stateFactory: true,namespaced: true })