Q: Vuex-module-decorator:농담을 사용하여 Vuex 액션을 테스트하는 방법

Q: Vuex-module-decorator:농담을 사용하여 Vuex 액션을 테스트하는 방법

Jest를 사용하여 Vuex 액션을 테스트하고 싶습니다.Vuex-module-decorator를 사용하여 클래스 스타일로 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();
  }
}

제 테스트 코드는 다음과 같습니다.테스트 및 게터 테스트 작업입니다.하지만 나는 어떻게 행동해야 할지 모른다.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, 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);
  });
});

다음과 같이 모듈을 직접 테스트하지 말고 스토어를 장착하여 테스트해 보십시오.

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 })

언급URL : https://stackoverflow.com/questions/63970109/q-vuex-module-decorators-how-to-test-a-vuex-actions-using-jest