Vue测试实用程序:如何模拟VueX中操作的返回

Question

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

Answer 1

首先，如果要模拟Vuex Store，则不需要调用localVue.use(Vuex)。只有当您要在测试中使用真正的Vuex Store时，才应该调用localVue.use(Vuex)。如果要进行传递，则必须将store对象与localVue和另一个参数一起传递，而不是在mocks属性中传递。

第二个，要模拟您的操作，您可以模拟store的dispatch方法，如下所示：

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