reactjs - 用 Jest 模拟 React 自定义钩子(Hook)

Question

在对 React 组件进行单元测试时，我需要模拟我的自定义钩子(Hook)。我已经阅读了一些关于这个简单任务的教程和 stackoverflow 的答案，但没有正确实现它。
我最简单的单一测试设置如下:

// TestComponent.js

import React from "react";
import useTest from "./useTest";

const TestComponent = () => {
  const { state } = useTest("initial_value");

  return <div>{state}</div>;
};

export default TestComponent;

// useTest.jsx - simple custom hook

import React, { useState } from "react";

const useTest = (initialState) => {
  const [state] = useState(initialState);
  return { state };
};

export default useTest;

// TestComponent.test.jsx - my test case

import React from "react";
import { render } from "@testing-library/react";
import TestComponent from "./TestComponent";

jest.mock("./useTest", () => ({
  useTest: () => "mocked_value",
}));

test("rendertest", () => {
  const component = render(<TestComponent />);
  expect(component.container).toHaveTextContent("mocked_value");
});

所以我试图模拟 useTest自定义钩子(Hook)从真正的自定义钩子(Hook)返回“mocked_value”，而不是“initial_value”。但上面的代码只是给了我这个错误:

TypeError: (0 , _useTest.default) is not a function

      3 | 
      4 | const TestComponent = () => {
    > 5 |   const { state } = useTest("initial_value");
        |                     ^
      6 | 
      7 |   return <div>{state}</div>;
      8 | };

我也试过:

import useTest from './useTest';
// ...
jest.spyOn(useTest, "useTest").mockImplementation(() => "mocked_value");

import useTest from './useTest';
// ...
jest.spyOn(useTest, "useTest").mockReturnValue("mocked_value");

但两者都给我错误 Cannot spy the useTest property because it is not a function; undefined given instead .
我如何实现这个测试？

Answer 1

我在回答自己。这样它的工作方式:

jest.mock("./useTest", () => ({
  useTest: () => ({ state: 'mocked_value' }),
}));

如果我想在自定义钩子(Hook)中使用默认导出:

jest.mock("./useTest", () => ({
  __esModule: true,
  default: () => ({ state: 'mocked_value' }),
}));

另外，如果我还想使用 setState我的钩子(Hook)中的方法并导出它，我可以像这样模拟它:

const mockedSetState = jest.fn();

jest.mock("./useTest", () => ({
  useTest: () => ({ state, setState: mockedSetState }),
}));

现在可以检查是否 setState被调用过一次:

expect(mockedSetState).toHaveBeenCalledTimes(1);