如何测试整个文档页面上的onKeyDown事件是否弹出？

Question

我有一个弹出窗口，我想测试一下当我按下键盘上的ESC时弹出窗口是否关闭。该功能有效，但是我想通过测试。我不知道如何模拟整个文档上的keyDown按下，而不仅仅是模态弹出组件。

现在是我的测试：

  test("it should call the onKeyDown handler on key ESC press", () => {
    const onKeydownSpy = jest.fn();
    const component = mount(
      <div id="wrapper">
        <Modal
          isOpen={false}
          portalParent="#wrapper"
          onClose={() => {}}
          id="123"
        >
          <p>Modal</p>
        </Modal>
      </div>
    );

    component.simulate("keydown", { keyCode: 27 });
    expect(onKeydownSpy).toHaveBeenCalledTimes(1);
    expect(onKeydownSpy).toHaveBeenCalledWith(0);
  });

这是我的代码：

  const handleKeyDownEvent = useCallback(event => {
    if (event.keyCode === 27) {
      onClose();
    }
  }, []);

  useEffect(() => {
    if (isOpen) {
      document.addEventListener("keydown", handleKeyDownEvent);
    } else {
      document.removeEventListener("keydown", handleKeyDownEvent);
    }
  }, [handleKeyDownEvent, isOpen]);

谢谢，如果需要更多信息，请告诉我

Answer 1

我认为您遇到的问题是文档或子元素之一需要具有当前的“焦点”，如果您在发送esc键之前进行了检查，您会得到什么：

document.hasFocus();

一般来说，您可以：

document.focus();

在释放密钥之前。

Answer 2

这能解决您的问题吗？

simulant.fire（document.body.querySelector（'aside'），'click'）

 it('only triggers clickOutside handler when clicking outside component', t => {
    const onClickOutside = sinon.spy()
    enter code here
    ReactDOM.render(<Page onClickOutside={onClickOutside} />, document.body)
    simulant.fire(document.body.querySelector('aside'), 'click')
    t.equal(onClickOutside.callCount, 1, 'should fire when clicking menu sibling')
    document.body.innerHTML = ''
    t.end()
  })

来源：https://github.com/airbnb/enzyme/issues/426