Tengo un gancho personalizado como se muestra a continuación.
export const useUserSearch = () => { const [options, setOptions] = useState([]); const [searchString, setSearchString] = useState(""); const [userSearch] = useUserSearchMutation(); useEffect(() => { if (searchString.trim().length > 3) { const searchParams = { orgId: "1", userId: "1", searchQuery: searchString.trim(), }; userSearch(searchParams) .then((data) => { setOptions(data); }) .catch((err) => { setOptions([]); console.log("error", err); }); } }, [searchString, userSearch]); return { options, setSearchString, }; }; y quiero probar este enlace pero no puedo simular la función de búsqueda de usuario que se llama dentro de userSearch . ¿Alguien puede ayudar? esta es mi prueba
it('should set state and test function', async () => { const wrapper = ({ children }) => ( <Provider store={store}>{children}</Provider> ) const { result } = renderHook( () => useUserSearch(), { wrapper } ) await act(async () => { result.current.setSearchString('abc5') }) expect(result.current.options).toEqual(expected) })useUserSearchMutation
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'; export const userSearchAPI = createApi({ reducerPath: 'userSearchResult', baseQuery: fetchBaseQuery({baseUrl: process.env.REACT_APP_BASE_URL}), tagTypes: ['Users'], endpoints: build => ({ userSearch: build.mutation({ query: body => ({url: '/org/patient/search', method: 'POST', body}), invalidatesTags: ['Users'], }), }), }); export const {useUserSearchMutation} = userSearchAPI;Debido a que es una exportación con nombre, debe devolver un objeto en el simulacro
it("should set state and test function", async () => { jest.mock("./useUserSearchMutation", () => ({ useUserSearchMutation: () => [jest.fn().mockResolvedValue(expected)], })); const wrapper = ({ children }) => ( ... });He creado un ejemplo más pequeño basado en su código, donde me burlo de un gancho dentro de otro gancho.
ganchos/useUserSearch.js
import { useEffect, useState } from "react"; import useUserSearchMutation from "./useUserSearchMutation.js"; const useUserSearch = () => { const [text, setText] = useState(); const userSearch = useUserSearchMutation(); useEffect(() => { const newText = userSearch(); setText(newText); }, [userSearch]); return text; }; export default useUserSearch;ganchos/useUSerSearchMutation.js
Tuve que mover esto a su propio archivo para poder burlarme de él cuando se llamó dentro del otro gancho.
const useUserSearchMutation = () => { return () => "Im not mocked"; }; export default useUserSearchMutation;Aplicación.prueba.js
import { render } from "react-dom"; import useUserSearch from "./hooks/useUserSearch"; import * as useUserSearchMutation from "./hooks/useUserSearchMutation"; import { act } from "react-dom/test-utils"; let container; beforeEach(() => { // set up a DOM element as a render target container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { // cleanup on exiting document.body.removeChild(container); container = null; }); function TestComponent() { const text = useUserSearch(); return <div>{text}</div>; } test("should mock userSearch", async () => { const mockValue = "Im being mocked"; jest .spyOn(useUserSearchMutation, "default") .mockImplementation(() => () => mockValue); act(() => { render(<TestComponent />, container); }); expect(container.textContent).toBe(mockValue); });