16

用于对文档附加了 keydown 侦听器JEST的组件进行单元测试。

我该如何测试JEST呢？如何模拟文档上的 keydown 事件？我需要将事件侦听器放在文档上，因为它应该响应键盘操作而与焦点元素无关。

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

目前正在尝试这样做：

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

3 回答 3

38

我遇到了完全相同的问题，不幸的是找不到有关如何使用TestUtils.Simulate. 然而，这个问题让我想到了直接.dispatchEvent在KeyboardEvent我的笑话测试中直接调用：

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

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

于 2016-01-24T18:18:03.347 回答
4

在挂载组件之前，您还可以将整个替换为document.eventListenermock 函数：

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

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

events.keydown({ keyCode: 37 })

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

于 2019-01-17T05:06:09.990 回答
0

按照@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;
     }
});
于 2020-05-18T21:52:31.513 回答