Vue-test-utils：如何模拟 VueX 中动作的返回？答案

【问题标题】：Vue-test-utils: How do I mock the return of an action in VueX?Vue-test-utils：如何模拟 VueX 中动作的返回？
【发布时间】：2021-08-20 06:40:18
【问题描述】：

我正在为 Vue 组件编写一个测试，该组件分派到模块存储以执行操作并使用它的结果。

该操作调用了我们的 API，因此我不想使用该操作运行测试，而是模拟它并返回一些虚拟数据以查看其余的方法流程是否有效。

因此，在我的测试中，我添加了一个模拟存储，它带有一个仅返回硬编码数据的模拟操作，目的是查看组件方法 getData() 设置操作对数据的响应。

但这似乎不起作用，而是似乎调用了真正的动作。如何设置它以避免调用实际操作，而是使用我为测试创建的操作？

组件方法，简化：

methods: {
    async getData() {
        const response = this.$store.dispatch("global/getDataFromAPI")

        if (!response) return

        this.$data.data = {...response.data}
    }
}

测试代码，简化：

describe('Component.vue', () => {
  let localVue;
  let vuetify;
  let wrapper;
  let store;

  beforeEach(() => {
    localVue = createLocalVue();
    localVue.use(Vuex)
    vuetify = new Vuetify();

    let globalActions = {
      getDataFromAPI: async () => {
        return {
          status: 200,
          data: {
            information1: "ABC",
            information2: 123,
          }
        }
      } 
    }

    store = new Vuex.Store({
      modules: {
        global: {
          actions: globalActions,
          namespaced: false
        },
      }
    })

    wrapper = mount(Component, {
      localVue,
      vuetify,
      attachTo: div,
      mocks: {
        $t: () => { },
        $store: store,
      },
    });
  });

  it('Data is set correctly', async () => {
    await wrapper.vm.getData();

    const dataInformation1 = wrapper.vm.$data.data.information1;
    expect(dataInformation1).toBe("ABC")
  });

【问题讨论】：

标签： javascript vue.js unit-testing vuex

【解决方案1】：

首先，如果你想模拟Vuex Store，你不需要调用localVue.use(Vuex)。仅当您要在测试中使用真正的Vuex Store 时，才应调用localVue.use(Vuex)。如果你要去，你必须传递store 对象以及localVue 和另一个参数，而不是mocks 属性。

第二，要模拟您的操作，您可以像这样模拟store 的dispatch 方法：

mocks: {
  $store: {
    dispatch: () => { dummyData: 'dummyData' }
  }
}

【讨论】：