Recommended approach for route-based tests within routes of react-router

If you think about the responsibility of the AccessDenied component, it isn’t really to send the user home. That’s the overall behaviour you want, but the component’s role in that is simply to send the user to "/". At the component unit level, therefore, the test could look something like this:

import React, { FC } from "react";
import { Link, Router } from "react-router-dom";
import { fireEvent, render, screen } from "@testing-library/react";
import { createMemoryHistory } from "history";

const AccessDenied: FC = () => (
    <div>
        <div>Access Denied</div>
        <p>You don't have permission to view the requested page</p>
        <Link to="/">
            <button>Go Home</button>
        </Link>
    </div>
);

describe("AccessDenied", () => {
    it("sends the user back home", () => {
        const history = createMemoryHistory({ initialEntries: ["/access-denied"] });
        render(
            <Router history={history}>
                <AccessDenied />
            </Router>
        );

        fireEvent.click(screen.getByText("Go Home"));

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

Note that "/" is the default path, so if you don’t provide initialEntries the test passes even if the click doesn’t do anything…

At that point you might be thinking “but what if the home route changes?” If you moved the home page to "/home", for example, this test would continue to pass but the application would no longer actually work. This is a common problem with relying too much on very low-level tests and is where higher-level tests come into play, including:

• Integration: render the whole App and use fireEvent to simulate navigation. This is challenging in your current setup, because the Router is at the App level; I’d move the Router to index.tsx and have a Switch in App.tsx instead, so you can render App within a MemoryRouter or use the createMemoryHistory method I show above (I’ve done this in this starter kit for example).

• End-to-end: use a browser driver (e.g. Cypress or the various Selenium-based options) to automate actual user interactions with the app.

I haven’t got as far as showing tests for routing, but do cover these different levels of test for a simple React app on my blog.

---

In React Router v6, you need to update the Router usage slightly (see “Cannot read properties of undefined (reading ‘pathname’)” when testing pages in the v6 React Router for details):

render(
  <Router location={history.location} navigator={history}>
    <AccessDenied />
  </Router>
);