在Jest/jsdom/Rect测试库中，启动键盘事件未按预期工作

Question

我一起模拟了一个小例子——点击按钮1，会显示另外两个按钮。

我可以通过点击来测试这段旅程——然而，当我尝试测试按下按钮的Enter键时，似乎什么都没有发生，尽管我在测试中放置的事件侦听器正在按预期登录控制台。

我用下面的代码创建了一个沙盒：https://codesandbox.io/s/gifted-beaver-uetbm?file=/src/测试/app.js

it('should display additional buttons when "Button 1" has been pressed via keyboard', () => {
const {button1, button2} = renderApp()
button1.addEventListener('keydown', () =>
console.log('Button 1 has been pressed - keydown'),
)
fireEvent.keyDown(button1, {
key: 'Enter',
code: 13,
charCode: 13,
keyCode: 13,
})
expect(button2).toBeVisible()
});

我可以通过添加onKeyPress道具来强制它在我的组件中工作，但这感觉就像是为了通过测试而复制代码——无论如何，当它在浏览器中作为标准工作时，我不喜欢这样的想法？

<button
onClick={() => setShowButtons(!showButtons)}
// this works, but I don't think I should be duplicating code to appease tests?
// onKeyDown={e => e.keyCode === 13 && setShowButtons(!showButtons)}
>
Button 1
</button>

被触发的事件似乎明确地在寻找它们所关联的事件，而不是副产品——比如按下按钮上的回车键并期望触发点击事件。不管这是标准的浏览器行为吗？也许我错了？

我真的被难住了——我觉得这应该奏效吗？任何帮助都会很棒！谢谢

Answer 1

您需要将expect包装在waitFor(() => expect(button2).toBeVisible())中