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

Question

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

假设当用户按下 Esc 键时它必须运行 onClose() 函数。我手动对其进行了测试，并且效果很好。现在我正在做同样的测试，这次使用 Jest + React 测试库。您可以看到下面的代码：

fireEvent.keyDown(container, {
      key: "Escape",
      code: "Escape",
      keyCode: 27,
      charCode: 27
    });

而且测试没有通过。经过一些调试后，我意识到该事件实际上已被触发，但由于某种原因对 <Dialog/> 组件没有影响。

所以我在 Google Chrome 上做了运行组件，并使用以下代码从 Dev Tools 控制台触发了相同的事件：

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

而且有效。

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

fireEvent.keyDown not working as expected on my Jest + React Testing Library test

reactjs

jestjs

material-ui

react-testing-library