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

【问题标题】：fireEvent.keyDown not working as expected on my Jest + React Testing Library testfireEvent.keyDown 在我的 Jest + React 测试库测试中没有按预期工作
【发布时间】：2020-04-21 15:35:47
【问题描述】：

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

假设当用户按下Esc 键时它必须运行onClose() 函数。我手动测试了它，它工作得很好。现在我正在做同样的测试，这次使用 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
        }
    )
);

...它也不起作用。

我该怎么做才能使这个测试通过？

【问题讨论】：

什么是container？在测试中，您在 container 上触发事件，但在浏览器中使用应用程序时可能不是这种情况。
容器是包装组件。但是在 Material UI Dialog 的情况下，Escape 键应该可以工作，无论焦点在哪里
你能提供一个代码沙箱吗？
@JMadelaine 你是对的。问题是事件的目标
很高兴你设法修复它！

标签： reactjs jestjs material-ui react-testing-library

【解决方案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
});

而且它有效。

【讨论】：