Q: Vuex-module-decorators: Как протестировать действия Vuex с помощью шутки?

Я хотел бы протестировать действия Vuex с помощью Jest. Я использую 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();
  }
}

Мой тестовый код приведен ниже. мутационный тест и геттерный тест работают. Но я не знаю, как проверить действие. Я не могу правильно выполнить действие 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);
  });
});

typescript vue.js vuex vuex-module-decorators
person fanfanta    schedule 19.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте смонтировать хранилище и протестировать его вместо непосредственного тестирования модуля, например:

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 })
person kamatheuska    schedule 31.03.2021
comment
это не работает, даже при использовании deepClone и других подходов. полностью потерян... Значения не меняются после отправки - person trainoasis; 13.07.2021