为JEST单元测试在文档上模拟键盘关闭

Question

使用JEST对具有附加到文档的按键侦听器的组件进行单元测试。

我如何在JEST中测试它？如何在文档上模拟keydown事件？我需要事件侦听器在文档上，因为它应该响应键盘操作，而不考虑焦点元素。

编辑:这里的问题是关于模拟文档或document.body上的事件。所有的例子都是关于一个实际的DOM节点，它可以很好地工作，但是文档不能。

目前正在尝试这样做：

TestUtils.Simulate.keyDown(document, {keyCode : 37}); // handler not invoked

Answer 1

我遇到了完全相同的问题，不幸的是，我找不到任何关于如何使用TestUtils.Simulate解决这个问题的细节。但是，this issue让我想到了直接在jest测试中使用KeyboardEvent调用.dispatchEvent：

var event = new KeyboardEvent('keydown', {'keyCode': 37});
document.dispatchEvent(event);

您可以在此处的KeyboardEvent上找到详细信息：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent

Answer 2

您也可以在挂载组件之前，将整个document.eventListener替换为模拟函数：

let events;
document.addEventListener = jest.fn((event, cb) => {
  events[event] = cb;
});

挂载后调用events[event]模拟事件，例如：

events.keydown({ keyCode: 37 })

此外，如果您有许多处理DOM事件的测试，那么在beforeEach()函数中执行第一部分也是非常舒适的。

Answer 3

根据@Iris Schaffer的回答，如果你的代码使用了ctrl/alt/shift键，你将需要初始化它们，以及在KeyboardEvent上模拟getModifierState方法的实现

const keyboardEvent = new KeyboardEvent('keydown', { keyCode, shiftKey, altKey, ctrlKey });
jest.spyOn(keyboardEvent, 'getModifierState').mockImplementation((modifier) => {
     switch (modifier) {
          case 'Alt':
               return altKey;
          case 'Control':
               return ctrlKey;
          case 'Shift':
               return shiftKey;
     }
});