Not able to mock a function inside useEffect

Question

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;

Africanize

According to your code useUserSearch is the first item in an array returned from useUserSearchMutation. So have you tried mocking useUserSearchMutation as follows: jest.mock('./useUserSearchMutation'., () => [jest.fn(() => ['mock-data']]) – Servomechanism

i have tried that .but it is not working the userSearch.js contains export const { useUserSearchMutation } = userSearchAPI @Servomechanism – Africanize

Show the code about useUserSearchMutation hook – Mcginnis

@slideshowp2 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 – Africanize

@NIshamMahsin Please add the code to your original question. – Andreeandrei

Answer 1

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

Gee

Answer 2

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 }) => (
...
});

Genova