使用反应路由器和反应测试库测试后退按钮

Question

我有一个组件，允许用户使用 React router v6 的钩子导航回历史记录useNavigate。但是，当我调用该函数时，测试似乎失败，navigate(-1)但如果我传递字符串 url，则测试会通过，例如。navigate("/home")。有谁知道正确的测试方法吗navigate(-1)？这是一个codesandbox来说明问题https://codesandbox.io/s/navigate-back-test-yt82g3?file=/src/navigateBack.test.tsx

import { renderWithRouter } from "./testUtils";
import { screen } from "@testing-library/react";

it("goes back", () => {
  function Home() {
    let navigate = useNavigate();

    function handleClick() {
      navigate("/about");
    }

    return (
      <div>
        <h1>Home</h1>
        <button onClick={handleClick}>about me</button>
      </div>
    );
  }

  function About() {
    let navigate = useNavigate();

    function handleClick() {
      navigate(-1); // test failed
      // navigate("/home"); // test passed
    }

    return (
      <div>
        <h1>About</h1>
        <button onClick={handleClick}>go back</button>
      </div>
    );
  }

  const { user } = renderWithRouter(
    <Routes>
      <Route path="home" element={<Home />} />
      <Route path="about" element={<About />} />
    </Routes>,
    {
      route: "/home"
    }
  );

  user.click(screen.getByText(/about me/i));

  user.click(screen.getByText(/go back/i));

  expect(window.location.pathname).toBe("/home");
});

Answer 1

如果您只想测试后退导航，那么我建议使用MemoryRouter并提供初始路线。您只需要一个即可返回。我认为渲染器有一个小问题renderWithRouter，所以直接用MemoryRouter.

例子：

import { render } from "@testing-library/react";
import user from "@testing-library/user-event";
import {
  MemoryRouter as Router,
  Route,
  Routes,
  useNavigate
} from "react-router-dom";
import { screen } from "@testing-library/react";

function Home() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/about");
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>about me</button>
    </div>
  );
}

function About() {
  const navigate = useNavigate();

  function handleClick() {
    navigate(-1);
  }

  return (
    <div>
      <h1>About</h1>
      <button onClick={handleClick}>go back</button>
    </div>
  );
}

it("goes back", () => {
  render(
    <Router initialEntries={["/about"]}>
      <Routes>
        <Route path="home" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </Router>
  );

  user.click(screen.getByText(/go back/i));

  expect(window.location.pathname).toBe("/");
});