Vue-test-utils:如何在VueX中模拟动作的返回？
Vue-test-utils:如何在VueX中模拟动作的返回？
提问于 2021-06-01 21:38:22
我正在为一个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")
});回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-01 22:22:59
First，如果您想要模拟Vuex Store，则不需要调用localVue.use(Vuex)。只有当要在测试中使用真正的localVue.use(Vuex)时，才应该调用Vuex Store。如果要访问，必须将store对象与localVue和其他参数一起传递，而不是在mocks属性中传递。
第二次，为了模拟您的操作，您可以像这样模拟store的dispatch方法：
mocks: {
$store: {
dispatch: () => { dummyData: 'dummyData' }
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67799453
复制相关文章
相似问题
腾讯云开发者
