Enzyme如何测试键盘按下事件？React Escape键测试遇问题

你遇到的核心问题是：Enzyme的simulate方法只能作用于组件渲染产出的DOM节点，而你的事件监听器绑定在了全局document对象上——这就导致wrapper.find('document')找不到目标节点，直接调用wrapper.simulate也只会触发组件根元素的事件，无法触发document上的监听逻辑。

下面给你几个可行的解决方案：

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

不依赖Enzyme的simulate，用原生JS创建并触发document上的键盘事件，直接命中你绑定的监听函数：

it('should respond to Escape key press', () => {
  // 渲染目标组件
  const wrapper = mount(<YourComponent />);
  
  // 创建Escape键按下事件并触发
  const escEvent = new KeyboardEvent('keydown', { keyCode: 27 });
  document.dispatchEvent(escEvent);
  
  // 这里添加你的断言逻辑，比如验证组件状态或行为变化
  expect(wrapper.state('isModalOpen')).toBe(false);
});

方案2：清理事件监听（避免测试污染） #

记得在测试结束后移除事件监听，防止影响其他测试用例。你可以在组件内添加卸载逻辑：

componentWillUnmount() {
  document.removeEventListener("keydown", this.escFunction.bind(this), false);
}

或者在测试的afterEach钩子中手动清理：

afterEach(() => {
  const componentInstance = wrapper.instance();
  document.removeEventListener('keydown', componentInstance.escFunction);
});

方案3：Mock事件监听并验证回调 #

如果只是想验证监听函数是否被正确绑定和调用，可以用Jest mock document.addEventListener，并手动触发回调：

it('should bind escFunction on component mount', () => {
  // 监听组件原型上的escFunction方法
  const escFunctionSpy = jest.spyOn(YourComponent.prototype, 'escFunction');
  
  // Mock document.addEventListener，触发Escape键回调
  document.addEventListener = jest.fn((eventType, callback) => {
    if (eventType === 'keydown') {
      callback({ keyCode: 27 });
    }
  });
  
  mount(<YourComponent />);
  
  // 验证监听逻辑是否生效
  expect(escFunctionSpy).toHaveBeenCalled();
  expect(document.addEventListener).toHaveBeenCalledWith('keydown', expect.any(Function), false);
});

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