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

Question

在我当前的 React 项目中，我正在测试一个组件，其中包括Material UI 中的Dialog 组件作为子组件。

假设它必须onClose()在用户按下Esc键时运行该功能。我手动测试了它，它运行得非常好。现在我正在做同样的测试，这次使用Jest + React Testing Library。你可以看到下面的代码：

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 是对的，我发现了什么是错的。事件目标不应该是containernor 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
});

它有效。