小编Her*_*man的帖子

在我当前的 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
        }
    )
);

......它也不起作用。

我该怎么做才能通过此测试？

我有以下代码：

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact={true} key="1">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 2 }}
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact={true} key="2">
          <motion.div …