jest mock vuex useStore() with vue 3 composition api

Question

我正在嘗試對一個組件進行單元測試，您可以在其中單擊一個按鈕，然后該按鈕應該調用 store.dispatch('favoritesState/deleteFavorite')。

然后此操作調用 api 並完成它的事情。 我不想測試 vuex store 的實現，只是當你點擊組件中的按鈕時調用 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);
});

我嘗試了不同的解決方案，但結果相同。 每當運行“觸發器（'點擊'）”時，它都會拋出此錯誤：

無法讀取未定義的屬性（讀取“調度”）類型錯誤：無法讀取未定義的屬性（讀取“調度”）

該項目使用組合 API 和 vuex4 用 typescript 用 vue3 編寫

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
    }
  }