如何测试Jest Mock模块中的useGetRequest调用情况？

要测试useGetRequest是否被调用，你需要把这个Hook改成Jest间谍函数（jest spy），这样才能跟踪它的调用状态；同时通过这种方式也能轻松访问和修改mock的内部逻辑。具体步骤如下：

1. 调整jest.mock实现，将useGetRequest转为Spy #

修改你的mock代码，把原本的匿名函数换成jest.fn()并预设默认返回值，让它变成可跟踪的间谍函数：

import React from "react";
// 先从目标模块导入useGetRequest（后续会被mock覆盖）
import { useGetRequest } from "../../../api";
import mockMyCards from './path-to-your-mock-data'; // 确保mock数据路径正确

// 重写mock，把useGetRequest设为带默认返回值的spy
jest.mock("../../../api", () => ({
  useGetRequest: jest.fn(() => ({
    data: mockMyCards,
    isLoading: false,
  })),
}));

2. 在测试用例中断言调用情况 #

现在useGetRequest已经是一个间谍函数，你可以直接用Jest的断言方法检查它的调用状态：

it('should trigger useGetRequest when component renders', () => {
  // 渲染你的组件（假设使用@testing-library/react）
  render(<YourTargetComponent />);

  // 断言useGetRequest至少被调用一次
  expect(useGetRequest).toHaveBeenCalled();
  // 还可以断言调用次数、传入参数（如果有）
  expect(useGetRequest).toHaveBeenCalledTimes(1);
  // 如果Hook接受参数（比如请求地址），可检查参数匹配：
  // expect(useGetRequest).toHaveBeenCalledWith('/your-api-path');
});

3. 访问并动态修改mock内部逻辑 #

如果需要在不同测试用例中切换useGetRequest的返回值（比如模拟加载、错误状态），直接调用Spy的方法即可：

it('should display loading state correctly', () => {
  // 动态修改mock返回值，模拟加载中状态
  useGetRequest.mockReturnValue({
    data: null,
    isLoading: true,
  });

  render(<YourTargetComponent />);
  // 此处断言组件加载状态的渲染逻辑
});

it('should handle fetch error properly', () => {
  // 用mockImplementation自定义更复杂的返回逻辑
  useGetRequest.mockImplementation(() => ({
    data: null,
    isLoading: false,
    error: 'Failed to fetch data',
  }));

  render(<YourTargetComponent />);
  // 此处断言组件错误状态的处理逻辑
});

额外提示 #

为避免测试用例之间互相干扰，建议在每个测试前重置Spy的调用记录：

beforeEach(() => {
  useGetRequest.mockClear(); // 清除之前的调用痕迹
});

内容的提问来源于stack exchange，提问作者uhidga