如何测试React自定义Hook中click事件回调handleClick是否被调用

由于handleClick是Hook内部闭包的私有函数，默认外部无法直接访问，因此通常有两种可落地的测试思路，分别是无侵入的间接校验，和调整可测性后的直接校验，具体实现如下：

方式1：不修改现有Hook代码，间接校验逻辑 #

核心思路是劫持window.addEventListener捕获click事件绑定的回调，再验证触发逻辑，示例代码如下：

import { renderHook } from '@testing-library/react';
import useHook from './useHook';

test('window点击事件触发时handleClick被调用', () => {
  // 1. 劫持window.addEventListener，存储绑定的click回调
  let boundHandleClick = null;
  const originalAddEventListener = window.addEventListener;
  jest.spyOn(window, 'addEventListener').mockImplementation((eventName, handler) => {
    if (eventName === 'click') {
      boundHandleClick = handler;
    }
    // 保持原方法执行，不影响其他逻辑
    return originalAddEventListener(eventName, handler);
  });

  // 2. 渲染自定义Hook，触发useEffect执行事件绑定
  renderHook(() => useHook());

  // 3. 给捕获到的handleClick套一层jest mock函数，统计调用情况
  const mockHandleClick = jest.fn(boundHandleClick);
  // 替换原来绑定的回调
  window.removeEventListener('click', boundHandleClick);
  window.addEventListener('click', mockHandleClick);

  // 4. 模拟触发window点击事件
  window.dispatchEvent(new MouseEvent('click'));

  // 5. 校验mock函数被调用
  expect(mockHandleClick).toHaveBeenCalledTimes(1);

  // 清理mock避免影响其他用例
  jest.restoreAllMocks();
});

方式2：修改Hook提升可测性（更推荐） #

如果允许调整Hook代码，我们可以把内部函数抽离到模块顶层，方便直接mock监听，测试逻辑会更简洁：

调整后的Hook代码： #

// 把handleClick抽离到模块顶层，方便jest mock
export const handleClick = () => {};

const useHook = () => {
  useEffect(() => {
    window.addEventListener('click', handleClick);
    // 补充清理函数，避免内存泄漏，原Hook缺少该逻辑
    return () => window.removeEventListener('click', handleClick);
  }, []);

  return null;
};
export default useHook;

对应的测试代码： #

import { renderHook, fireEvent } from '@testing-library/react';
import useHook, * as hookModule from './useHook';

test('window点击时handleClick被触发', () => {
  // 直接mock抽离出来的handleClick函数
  const handleClickSpy = jest.spyOn(hookModule, 'handleClick').mockImplementation(jest.fn());
  
  renderHook(() => useHook());
  fireEvent.click(window);
  
  expect(handleClickSpy).toHaveBeenCalledTimes(1);
  jest.restoreAllMocks();
});

注意事项 #

• React 17及更早版本测试自定义Hook需要单独安装@testing-library/react-hooks依赖，使用其中导出的renderHook方法，React 18及以上版本直接使用@testing-library/react内置的renderHook即可
• 原Hook代码未添加useEffect清理逻辑，实际使用时建议补充事件解绑逻辑，避免组件卸载后触发内存泄漏

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