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

【问题标题】：How do I test an onKeyDown event on the whole document page for a pop up?如何在整个文档页面上测试 onKeyDown 事件是否弹出？
【发布时间】：2019-12-16 19:24:36
【问题描述】：

我有一个弹出窗口，我想测试一下，当我在键盘上按下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]);

提前致谢，如果您需要更多信息，请告诉我

【问题讨论】：

标签： javascript reactjs unit-testing testing enzyme

【解决方案1】：

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

document.hasFocus();

通常你可以：

document.focus();

在发出密钥之前。

【讨论】：

您好，您的意思是在哪里添加document.hasFocus();？在我调用 ESC 键之前在我的代码中还是在我的测试中？
您会在发出关键事件之前执行此操作，因此它可能应该在您的运行时代码中包含在触发此事件的任何函数中。然后你就不必把它放在你的测试中了。

【解决方案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

【讨论】：