本文详解如何在 Jest 单元测试中不仅模拟自定义 React Hook（如 useGetRequest），还能验证其是否被调用、检查调用次数，并安全访问其返回值，关键在于将模拟实现封装为 jest.fn()。
本文详解如何在 jest 单元测试中不仅模拟自定义 react hook（如 `usegetrequest`），还能验证其是否被调用、检查调用次数，并安全访问其返回值，关键在于将模拟实现封装为 `jest.fn()`。
在 React 测试中，直接使用 jest.mock 返回一个静态对象（如 () => ({ data: ..., isLoading: ... })）虽能提供所需返回值，但会导致无法断言该函数是否被调用——因为该实现本身不是 Jest 模拟函数，不具备 .toHaveBeenCalledTimes() 或 .toHaveBeenCalled() 等追踪能力。
✅ 正确做法是：将模拟的 Hook 实现包装在 jest.fn() 中，使其既保留行为逻辑，又具备可断言的调用记录能力。
以下为完整、可运行的示例：
import { render } from '@testing-library/react';
import React from 'react';
import { useGetRequest } from '../../../api'; // 原始导入路径（供参考）
// 1. 定义模拟返回数据
const mockMyCards = [{ id: 1, title: 'Card A' }];
// 2. 创建可追踪的模拟函数
const mockedUseGetRequest = jest.fn(() => ({
data: mockMyCards,
isLoading: false,
}));
// 3. 使用 jest.mock 替换模块，导出该模拟函数
jest.mock('../../../api', () => ({
useGetRequest: mockedUseGetRequest,
}));
// 4. 编写测试用例
describe('YourComponent', () => {
afterEach(() => {
mockedUseGetRequest.mockClear(); // 清理调用记录，避免测试间污染
});
it('should call useGetRequest exactly once during render', () => {
render(<yourcomponent></yourcomponent>);
// ✅ 验证 Hook 被调用
expect(mockedUseGetRequest).toHaveBeenCalledTimes(1);
// ✅ 可进一步验证返回值结构（若需深度校验）
const result = mockedUseGetRequest();
expect(result.data).toEqual(mockMyCards);
expect(result.isLoading).toBe(false);
});
});
⚠️ 注意事项：
- 不要在 jest.mock 工厂函数内部直接调用 jest.fn()（如 () => jest.fn(...)），这会导致每次导入都新建一个函数实例，失去调用追踪能力；应提前声明 mockedUseGetRequest 并在 mock 中直接引用。
- 若 useGetRequest 接收参数（如 useGetRequest(url)），需在 mockedUseGetRequest 中保留参数签名，并在断言中使用 expect(mockedUseGetRequest).toHaveBeenCalledWith(...)。
- 始终在 afterEach 或 beforeEach 中调用 mockedUseGetRequest.mockClear()，确保各测试用例相互隔离。
- 若组件内多次调用该 Hook（如条件渲染或循环），可通过 toHaveBeenCalledTimes(n) 或 toHaveBeenNthCalledWith(n, ...) 进行精细化断言。
通过这一模式，你不仅能控制模拟行为，还能像对待普通 Jest Mock Function 一样全面验证其使用方式——真正实现「可测、可观、可控」的 Hook 单元测试。
