Testing back button using react router and react testing library

Question

I have a component which allows users to navigate back in history using react router v6's useNavigate hook. However, the test seems to fail when I call the function with navigate(-1) but passes if I pass a string url eg. navigate("/home"). Does anyone know the right way to test navigate(-1)? Here's a codesandbox to illustrate the issue 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

If you just want to test the back navigation then I suggest using a MemoryRouter and supplying the initial routes. You only need one to go back from. I think there's a minor issue with the renderWithRouter renderer, so just wrap the components directly with the MemoryRouter.

Example:

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("/");
});