Not able to mock a function inside useEffect

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 17 hours . NIsham Mahsin is looking for an . 的。

I have a custom hook as below

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

and I want to test this hook but am not able to mock userSearch function which is being called inside useEffect. can anybody help? this is my test

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;

Answer 1

Because it's a named export you should return an object in the mock

it("should set state and test function", async () => {
  jest.mock("./useUserSearchMutation", () => ({
    useUserSearchMutation: () => [jest.fn().mockResolvedValue(expected)],
  }));
  const wrapper = ({ children }) => (
...
});

Answer 2

I have created a smaller example based on your code, where I am mocking a hook inside another hook.

hooks/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;

hooks/useUSerSearchMutation.js

I had to move this to its own file to be able to mock it when it was called inside of the other hook.

const useUserSearchMutation = () => {
  return () => "Im not mocked";
};

export default useUserSearchMutation;

App.test.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);
});