React-Jest测试：keydown事件preventDefault未被调用问题

你遇到的核心问题是事件监听的目标和测试触发的事件目标不匹配，导致组件里的onKeyDown回调根本没被执行，自然preventDefault()的调用次数为0。

问题拆解 #

你的组件代码中，useEffect是给document绑定了keydown事件监听：

useEffect(() => {
 document.addEventListener("keydown", onKeyDown, false);
 return () => document.removeEventListener("keydown", onKeyDown, false);
}, []);

但单元测试里，却是给grid元素触发keydown事件：

fireEvent.keyDown(grid, mockEvent);

默认情况下，fireEvent触发的事件不会向上冒泡到document（除非显式设置bubbles: true），所以组件里绑定在document上的回调完全接收不到这个事件——你可以检查测试运行时console.log("==== TEST REACHED HERE ====")是否输出，如果没输出，就说明回调根本没被执行，更别说preventDefault()被调用了。

三种可行解决方案 #

方案1：直接触发document的keydown事件

既然组件监听的是document，那测试里直接给document触发事件即可：

it("should prevent default action on key down", () => {
 render(<App {...props} />);
 const mockEvent = { preventDefault: jest.fn() };
 fireEvent.keyDown(document, mockEvent);
 expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
});

方案2：修改组件监听目标为grid元素（如果业务逻辑需要）

如果你的组件实际是要监听grid容器的键盘事件，而不是全局document，那调整组件代码，把监听绑定到grid元素上：

// App.js
import { useRef, useEffect } from 'react';

const App = (props) => {
  const gridRef = useRef(null);
  const onKeyDown = e => {
    console.log("==== TEST REACHED HERE ====")
    e.preventDefault();
  };

  useEffect(() => {
    const grid = gridRef.current;
    if (grid) {
      grid.addEventListener("keydown", onKeyDown, false);
      return () => grid.removeEventListener("keydown", onKeyDown, false);
    }
  }, []);

  return <div role="app" ref={gridRef}>...</div>;
};

export default App;

对应的测试代码保持不变，因为此时监听的就是grid元素，触发它的事件就能命中回调。

方案3：让测试触发的事件冒泡到document

如果你需要保留document的全局监听，同时测试时通过grid元素触发事件，那需要在mock事件里设置bubbles: true，让事件向上冒泡：

it("should prevent default action on key down", () => {
  const { getByRole } = render(<App {...props} />);
  const grid = getByRole("app");
  const mockEvent = { 
    preventDefault: jest.fn(),
    bubbles: true // 开启事件冒泡
  };
  fireEvent.keyDown(grid, mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
});

验证小技巧 #

可以先在测试里确认onKeyDown是否被执行：比如给组件里的onKeyDown添加一个jest spy，或者在测试运行时观察控制台日志，确认回调是否被触发，这样能快速定位问题是否出在事件传递环节。

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