无法模拟 useEffect 中的函数

Question

我有一个自定义挂钩，如下所示

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

我想测试这个钩子，但无法模拟在 useEffect 中调用的 userSearch 函数。有人可以帮忙吗？这是我的测试

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

因为它是命名导出，所以您应该 return 模拟中的对象

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

Answer 2

我根据您的代码创建了一个较小的示例，我在其中模拟另一个钩子中的一个钩子。

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

我必须将它移到它自己的文件中才能在它被调用时模拟它在另一个钩子里面。

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

无法模拟 useEffect 中的函数

Not able to mock a function inside useEffect

javascript

reactjs

jestjs

react-testing-library