如何测试Ant Design Modal键盘交互？ESC关闭测试失败求助

你的React模态框组件本身支持ESC键关闭，但测试始终失败，提示内容元素仍处于可见状态。先还原你的代码场景：

组件代码 #

const ModalComponent = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal
        title="Modal title"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        content
      </Modal>
    </>
  );
};

测试代码 #

it("closes modal on ESC press", async () => {
    render(<ModalComponent />)

    expect(
      await screen.findByText(
        "content",
      ),
    ).toBeVisible();

    fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });

    await waitFor(async () => {
      expect(
        await screen.findByText(
          "content",
        ),
      ).not.toBeVisible();
    });
  });

问题根源分析 #

1. 缺失打开模态框的步骤：测试里直接断言内容可见，但模态框初始状态是visible=false，根本没打开。findByText能通过大概率是测试超时异常，逻辑本身不成立。
2. 事件触发目标错误：多数UI组件库（比如Ant Design Modal）会把ESC关闭的监听绑定在模态框的弹窗容器上，而非全局document。直接给document触发按键事件，模态框的监听函数接收不到。
3. 断言方式错误：findByText会等待元素出现，模态框关闭后内容元素可能被卸载，用它断言会触发找不到元素的错误，应该用queryByText检查元素是否不存在/不可见。

修正后的测试代码 #

it("closes modal on ESC press", async () => {
  render(<ModalComponent />);

  // 1. 点击按钮打开模态框
  fireEvent.click(screen.getByText("Open Modal"));
  // 确认模态框内容已显示
  const modalContent = await screen.findByText("content");
  expect(modalContent).toBeVisible();

  // 2. 找到模态框容器（以Ant Design为例，类名为.ant-modal-wrap，根据你用的UI库调整）
  const modalContainer = document.querySelector(".ant-modal-wrap");
  // 给模态框容器触发ESC按键事件
  fireEvent.keyDown(modalContainer, { key: "Escape", keyCode: 27 });

  // 3. 断言模态框内容已被卸载或隐藏
  await waitFor(() => {
    expect(screen.queryByText("content")).not.toBeInTheDocument();
    // 若模态框仅隐藏而非卸载，改用：
    // expect(screen.queryByText("content")).not.toBeVisible();
  });
});

额外说明 #

如果是自定义模态框组件，要确保ESC事件监听绑定在模态框的根容器上，且仅在模态框显示时添加监听、隐藏时移除监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者howard wolowitz