本文介绍如何在 jest 测试中不仅模拟自定义 hook（如 usegetrequest），还能访问其调用状态、参数及返回值，关键在于将被模拟的函数封装为 jest.fn() 实例并导出引用。
本文介绍如何在 jest 测试中不仅模拟自定义 hook（如 usegetrequest），还能访问其调用状态、参数及返回值，关键在于将被模拟的函数封装为 jest.fn() 实例并导出引用。
在 React 单元测试中，我们常使用 jest.mock() 模拟 API 层模块（如 ../../../api），但默认的内联工厂函数写法（() => ({ useGetRequest: () => {...} })）会丢失函数的“可追踪性”——即无法通过 expect(...).toHaveBeenCalled() 断言调用行为，也无法获取调用次数、参数或返回值快照。
正确做法是：将待模拟的函数显式声明为 jest.fn()，再将其注入 mock 模块中。这样既保留了模拟逻辑，又赋予其完整的 Jest Mock Function 能力。
以下是一个完整、可运行的示例：
// 假设 mockMyCards 是已定义的测试数据
const mockMyCards = [{ id: 1, title: 'Card A' }];
// ✅ 关键：创建可追踪的 mock 函数
const mockedUseGetRequest = jest.fn(() => ({
data: mockMyCards,
isLoading: false,
}));
// 模拟整个模块，但只暴露该 mock 函数
jest.mock('../../../api', () => ({
useGetRequest: mockedUseGetRequest,
}));
// 注意：此处需确保模块路径与实际导入路径一致（含相对路径层级）随后在测试用例中，即可对 mockedUseGetRequest 进行各类断言：
import { render } from '@testing-library/react';
import YourComponent from '../YourComponent';
describe('YourComponent', () => {
// 清理 mock 状态，避免测试间污染
afterEach(() => {
mockedUseGetRequest.mockClear();
});
it('should call useGetRequest exactly once on render', () => {
render(<YourComponent />);
expect(mockedUseGetRequest).toHaveBeenCalledTimes(1);
});
it('should return expected data structure', () => {
render(<YourComponent />);
const result = mockedUseGetRequest();
expect(result).toEqual({
data: mockMyCards,
isLoading: false,
});
});
// 如需验证 Hook 是否被正确调用（例如带参数），可扩展如下：
// useGetRequest('cards') → 则 mock 定义为 jest.fn().mockReturnValue({...})
// 并用 expect(mockedUseGetRequest).toHaveBeenCalledWith('cards')
});⚠️ 重要注意事项：
- jest.mock() 必须置于文件顶层（不能在 describe 或 it 内部），且必须在任何实际导入被模拟模块之前执行（Jest 会在模块加载前 hoist mock 声明）；
- 若模块中有多个导出（如 usePostRequest, useDeleteRequest），应一并声明为 jest.fn() 并统一导出；
- 使用 mockClear() 或 mockReset() 在 afterEach 中重置状态，保证测试隔离性；
- 避免在 jest.mock() 工厂函数内部直接调用 jest.fn()（如 () => ({ useGetRequest: jest.fn() })），因该函数每次调用都会新建实例，导致外部无法引用。
通过这种模式，你不仅能模拟返回值，更能精准验证 Hook 的调用时机、频次与契约行为，大幅提升测试的可靠性和调试效率。
