在 JEST 单元测试中模拟文档上的 keydown

IT技术 unit-testing reactjs addeventlistener jestjs reactjs-testutils
2021-04-05 06:04:39

使用JEST进行单元测试,其具有附连到该文档的KEYDOWN听者的成分。

我怎样才能测试这个JEST如何模拟文档上的 keydown 事件?我需要事件侦听器位于文档上,因为它应该响应键盘操作,而不管焦点元素如何。

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

目前正在尝试这样做:

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

我遇到了完全相同的问题,不幸的是找不到有关如何使用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

从 2020 年和最新版本的 Jest 开始,如果我使用global.dispatchEvent而不是window.dispatchEvent
2021-05-25 06:04:39
感谢您的回答。
2021-06-07 06:04:39
对我来说,它只在更改为时'keydown'有效'keypress'
2021-06-20 06:04:39

您还可以document.eventListener在安装组件之前用模拟功能替换整个

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

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

events.keydown({ keyCode: 37 })

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

按照@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;
     }
});