Estoy tratando de realizar una prueba unitaria de un componente en el que hace clic en un botón que luego debería llamar a store.dispatch('favoritesState/deleteFavorite').
Esta acción luego llama a una API y hace su trabajo. No quiero probar la implementación de la tienda vuex, solo que se llama a la acción vuex cuando hace clic en el botón en el componente.
El componente se ve así
<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, } } });la prueba de la broma
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); });He probado diferentes soluciones con el mismo resultado. Cada vez que se ejecuta el "disparador ('clic')", arroja este error:
No se pueden leer las propiedades de undefined (leyendo 'dispatch') TypeError: No se pueden leer las propiedades de undefined (leyendo 'dispatch')
El proyecto está escrito en vue3 con mecanografiado usando API de composición y vuex4
Encontré una solución a mi problema. Esta es la solución con la que terminé.
favorito.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); });Este es el método de componentes:
setup(props) { const store = useStore(); function removeFavorite() { store.dispatch("favoritesState/deleteFavorite", favoriteId); } return { removeFavorite } }