使用vue 3 composition api创建jest mock vuex useStore()

Question

我正在尝试对一个组件进行单元测试，您可以单击一个按钮，然后调用store.dispatch('favoritesState/deleteFavorite'(。

然后，这个操作调用一个api并执行它的事情。我不想测试vuex商店的实现，只想在单击组件中的按钮时调用vuex操作。

组件如下所示

<template>
<ion-item :id="favorite.key">
<ion-thumbnail class="clickable-item remove-favorite-item" @click="removeFavorite()" slot="end" id="favorite-star-thumbnail">           
</ion-thumbnail>
</ion-item>
</template>
import {useStore} from "@/store";
export default defineComponent({
setup(props) {
const store = useStore();

function removeFavorite() {
store.dispatch("favoritesState/deleteFavorite", props.item.id);
}
return {
removeFavorite,
}
}
});

笑话测试

import {store} from "@/store";
test(`${index}) Test remove favorite for : ${mockItemObj.kind}`, async () => {
const wrapper = mount(FavoriteItem, {
propsData: {
favorite: mockItemObj
},
global: {
plugins: [store]
}
});
const spyDispatch = jest.spyOn(store, 'dispatch').mockImplementation();
await wrapper.find('.remove-favorite-item').trigger('click');
expect(spyDispatch).toHaveBeenCalledTimes(1);
});

我尝试过不同的解决方案，结果都是一样的。每当"；触发器("点击"("；运行时会抛出以下错误：

无法读取未定义(读取"dispatch"(类型的属性错误：无法读取未定义(读取"dispatch"(的属性

该项目是在vue3中编写的，使用组合API和vuex4 的typescript

Answer 1

我找到了解决问题的方法。这就是我最终得到的解决方案。

收藏夹。spec.ts

import {key} from '@/store';
let storeMock: any;
beforeEach(async () => {
storeMock = createStore({});
});
test(`Should remove favorite`, async () => {
const wrapper = mount(Component, {
propsData: {
item: mockItemObj
},
global: {
plugins: [[storeMock, key]],
}
});
const spyDispatch = jest.spyOn(storeMock, 'dispatch').mockImplementation();
await wrapper.find('.remove-favorite-item').trigger('click');
expect(spyDispatch).toHaveBeenCalledTimes(1);
expect(spyDispatch).toHaveBeenCalledWith("favoritesState/deleteFavorite", favoriteId);
});

这是组件方法：

setup(props) {
const store = useStore();

function removeFavorite() {
store.dispatch("favoritesState/deleteFavorite", favoriteId);
}
return {
removeFavorite
}
}