Javascript Vue测试utils：如何在VueX中模拟操作的返回？

我正在为一个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")
  });

测试代码，简化：

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

---

首先，如果要模拟

Vuex存储

，则无需调用

localVue。使用（Vuex）

。您应该调用

localVue.use（Vuex）

仅当您要在测试中使用real

Vuex存储时。如果要执行此操作，则必须传递
store
对象以及
localVue
和其他参数，而不是在
mocks
属性中

第二个，要模拟您的操作，您可以模拟
存储
的
分派
方法，如下所示：

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