在我当前的 React 项目中,我正在测试一个组件,其中包含作为子组件的 Dialog component from Material UI .
假设它必须运行 onClose()
当用户按下 Esc
时的功能 key 。我手动测试了它,它运行得非常好。现在我正在做同样的测试,这次使用 Jest + React 测试库 .你可以看到下面的代码:
fireEvent.keyDown(container, {
key: "Escape",
code: "Escape",
keyCode: 27,
charCode: 27
});
并且测试没有通过。经过一些调试后,我意识到该事件实际上是被触发的,但由于某种原因对
<Dialog/>
没有影响。成分。所以我确实在 Google Chrome 上运行了该组件,并使用以下代码从开发工具控制台触发了相同的事件:
document.dispatchEvent(
new KeyboardEvent(
"keydown", {
key: "Escape",
code: "Escape",
keyCode: 27,
charCode: 27
}
)
);
......它也不起作用。
我该怎么做才能通过此测试?
最佳答案
用户 JMadelaine 是对的,我发现了什么是错的。事件目标不应是 container
也不是 document
,但对话框本身。所以现在我已经改变了代码:
fireEvent.keyDown(container, {
key: "Escape",
code: "Escape",
keyCode: 27,
charCode: 27
});
...到这个:
fireEvent.keyDown(getByText(/the text in the dialog box/i), {
key: "Escape",
code: "Escape",
keyCode: 27,
charCode: 27
});
它有效。
关于reactjs - fireEvent.keyDown 在我的 Jest + React 测试库测试中没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59572341/