如何测试自定义Hooks的正确性？

测试自定义 Hooks 的正确性需要验证其在不同场景下的行为是否符合预期。由于 Hooks 依赖 React 运行时环境，我们需要使用专门的工具来模拟 React 组件环境进行测试。以下是常用的测试方法和示例：

一、测试工具选择

1. 测试框架：Jest（提供断言、 mocking 等功能）
2. React 测试工具：React Testing Library（提供渲染组件和用户交互的 API）
3. 专门的 Hooks 测试工具：@testing-library/react-hooks（简化 Hooks 测试，无需手动创建组件）

二、测试自定义 Hooks 的核心思路

1. 测试初始状态是否正确
2. 测试状态更新逻辑是否符合预期
3. 测试副作用（如事件监听、API 请求）是否正确执行和清理
4. 测试边界条件（如空值、错误输入）的处理

三、具体测试示例

1. 测试 useWindowSize Hook（窗口尺寸监听）

2. 测试 useLocalStorage Hook（本地存储同步）

3. 测试 useFetch Hook（API 请求）

需要 mock fetch 函数来模拟 API 响应：

四、测试自定义 Hooks 的最佳实践

1. 隔离测试：每个测试用例应独立，避免相互影响（可使用 beforeEach 清理状态）
2. 覆盖关键场景：
   • 初始状态
   • 正常更新流程
   • 错误/异常情况
   • 边界条件（如空输入、极限值）
3. 模拟外部依赖：
   • 对 window、document 等浏览器 API 进行 mock
   • 对 fetch、localStorage 等全局对象进行控制
4. 测试副作用清理：验证组件卸载时是否正确移除事件监听、定时器等（防止内存泄漏）

   it('should remove event listener on unmount', () => {
     const { unmount } = renderHook(() => useWindowSize());
     const removeSpy = jest.spyOn(window, 'removeEventListener');
     
     unmount();
     expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function));
   });

1. 避免测试实现细节：专注于测试输入输出和行为，而非内部变量或逻辑步骤

五、总结

测试自定义 Hooks 的关键是使用 @testing-library/react-hooks 提供的 renderHook 和 act 等工具，在模拟的 React 环境中执行 Hook，并验证其状态变化和副作用。通过覆盖各种场景（正常流程、异常情况、边界条件），可以确保自定义 Hooks 的可靠性和正确性。