javascript - 如何在整个文档页面上测试弹出窗口的 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();

在发出你的 key 之前。