reactjs - fireEvent.keyDown 在我的 Jest + React 测试库测试中没有按预期工作

Question

在我当前的 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
        }
    )
);

......它也不起作用。

我该怎么做才能通过此测试？

Answer 1

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

它有效。