Categories
discuss

Not able to mock a function inside useEffect

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

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

Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..