Question

使用JEST对连接到文档的keydown侦听器的组件进行单元测试。

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

编辑：这里的问题是关于模拟文档或document.body上的事件。所有的例子都是关于一个实际的DOM节点，它工作正常，但文档没有。

目前正在尝试这样做：

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

Answer 1

我遇到了完全相同的问题，遗憾的是无法找到有关如何使用TestUtils.Simulate解决此问题的任何详细信息。但是this issue让我想到直接在我的开玩笑测试中用.dispatchEvent调用KeyboardEvent：

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键，那么您将需要对其进行初始化，以及在getModifierState上模拟KeyboardEvent方法的实现

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;
     }
});

在文档上模拟keydown以进行JEST单元测试

3 个答案: