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

Posted 2023-02-22

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

【英文标题】：fireEvent.keyDown not working as expected on my Jest + React Testing Library test

【发布时间】：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 你是对的。问题是事件的目标

很高兴你设法修复它！

【参考方案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
);

而且它有效。