Question

我有一个通过的测试，但是我不明白为什么我必须这样写。这是测试设置：

describe("Photo Due", () => {
  const localVue = createLocalVue();
  localVue.use(Vuex);
  let store;
  let actions = {
    "api_data/photoAction": jest.fn(),
    "api_data/selectPhoto": jest.fn(),
    "modals/openCloseModal": jest.fn()
  },
  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        token: "abc",
        GLN: "123",
        GLT: "456",
        isDesktop: true
      },
      getters: {
        "auth/getToken": state => state.token,
        "auth/getGLN": state => state.GLN,
        "auth/getGLT": state => state.GLT,
        "app/getIsDesktop": state => state.isDesktop
      },
      actions
    });
  });
...

这是我的调用函数的测试，调用函数：

it("reportPhoto", async () => {
    const wrapper = factory();
    wrapper.vm.reportPhoto();
    wrapper.vm.$nextTick();
    expect(actions["api_data/selectPhoto"]).toHaveBeenCalled();  // THIS IS THE LINE IN QUESTION
  });

以这种方式设置测试后，一切都会通过。但是我在商店外定义动作并在测试中通过调用actions["api_data/selectSnap"]来访问它似乎并不正确。我从vue-test-utils网站上的指南中复制了这种方法。如果我不需要从商店访问操作和获取方法，那为什么不完全绕过商店并突出定义模拟vuex功能的随机函数呢？

我想我完全不了解幕后发生的事情，但是我不应该通过商店来访问操作吗？这就是我遇到的麻烦。

我的问题是：1）我需要通过商店访问操作吗？还是我在思考应该做的基本测试？ 2）如果我确实需要通过商店访问操作，该怎么做？

Answer 1

这实际上取决于您要进行哪种测试，以及是否要测试功能齐全的存储或只是检查它是否被调用。

我推荐this post。有几种示例说明的差异方法。当我需要编写一些面向商店的单元测试时，它对我有帮助

如何在Vue测试中正确访问商店操作？

1 个答案: