React自定义Hook测试问题：带MouseEvent参数的函数调用报错

核心问题分析 #

1. 调用startPan未传事件参数：startPan明确要求接收React.MouseEvent类型参数，直接调用result.current[1]()必然触发参数缺失报错。
2. Hook实例不共享：renderHook创建的是全新的usePan实例，和CanvasProvider组件中使用的不是同一个——哪怕触发了组件的mousedown事件，也不会影响这个新实例的状态，测试断言必然失败。

正确测试方案 #

方案一：测试组件交互行为（推荐） #

直接通过组件的DOM交互验证Hook效果，无需单独调用Hook方法：

test("should update pan state on mousedown", () => {
  renderApp();
  const canvas = screen.getByTestId(/canvas-wrapper/i);
  
  // 模拟带坐标的mousedown事件
  fireEvent.mouseDown(canvas, { pageX: 100, pageY: 200 });
  
  // 示例：假设CanvasComponent会渲染offset的x/y值，通过渲染结果断言
  const offsetX = screen.getByText(/offset-x: 100/i);
  const offsetY = screen.getByText(/offset-y: 200/i);
  expect(offsetX).toBeInTheDocument();
  expect(offsetY).toBeInTheDocument();
});

方案二：单独测试自定义Hook #

如果要单独测试usePan，需要创建模拟的React.MouseEvent参数传递给startPan，并验证状态/行为变化：

import { renderHook, act } from '@testing-library/react';
import { usePan } from './usePan';

test("should set up event listeners and record initial point on mousedown", () => {
  // 模拟符合要求的鼠标事件对象
  const mockMouseEvent = {
    pageX: 50,
    pageY: 75,
    preventDefault: jest.fn(),
    stopPropagation: jest.fn()
  } as React.MouseEvent<Element, MouseEvent>;
  
  const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
  
  const { result } = renderHook(() => usePan());
  
  // 用act包裹状态更新操作，确保React状态同步完成
  act(() => {
    result.current[1](mockMouseEvent);
  });
  
  // 验证事件监听器是否正确添加
  expect(addEventListenerSpy).toHaveBeenCalledWith('mousemove', expect.any(Function));
  expect(addEventListenerSpy).toHaveBeenCalledWith('mouseup', expect.any(Function));
});

额外提示 #

• 测试Hook时，所有触发状态更新的操作必须用act包裹，避免状态未同步导致的断言失败。
• 如果panState的更新依赖后续mousemove事件，需要在测试中继续模拟mousemove和mouseup事件，完整复现拖拽流程。

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