Testing React Router Components: From Unit to E2E Tests

Testing React Router Components: From Unit to E2E Tests

React Router is the de facto routing library for React applications, but testing components that rely on routing can be surprisingly tricky. Components often depend on useParams, useNavigate, useLocation, or Link — all of which require a router context to function. Without proper testing strategies, you may end up with brittle tests, false positives, or components that break silently in production. This tutorial walks you through a complete testing strategy, from isolated unit tests to full end-to-end (E2E) tests.

Why Testing Routing Matters

Routing is a core part of user experience. A broken link, a missing redirect, or an unguarded route can confuse users or expose protected content. Testing routing ensures that:

• Navigation between pages works as expected
• Route parameters are correctly consumed by components
• Protected routes redirect unauthenticated users
• Deep links and query parameters behave correctly
• Browser back/forward navigation preserves application state

A layered testing approach — unit, integration, and E2E — gives you both fast feedback during development and confidence in real user flows.

Setting Up the Project

For this tutorial, we assume a Vite-based React project with React Router v6+. Install the necessary testing dependencies:

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom playwright

Create a sample application with a few routes:

// src/App.jsx
import { Routes, Route, Link, NavLink } from 'react-router-dom';

function Home() {
  return <h1>Welcome Home</h1>;
}

function UserProfile() {
  return <h1>User Profile</h1>;
}

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

export default function App() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <NavLink to="/users/42">My Profile</NavLink>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:userId" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </nav>
  );
}

Unit Testing Router-Dependent Components

Unit tests focus on a single component in isolation. The challenge with router-dependent components is that hooks like useParams throw errors when rendered outside a Router. The solution is to wrap your component in a MemoryRouter during tests.

Creating a Custom Render Helper

Instead of manually wrapping every test, create a reusable render utility:

// src/test-utils.jsx
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

export function renderWithRouter(ui, { route = '/', ...renderOptions } = {}) {
  return render(
    <MemoryRouter initialEntries={[route]}>
      {ui}
    </MemoryRouter>,
    renderOptions
  );
}

Now you can test a component that reads route parameters:

// src/UserProfile.test.jsx
import { screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { renderWithRouter } from './test-utils';

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

describe('UserProfile', () => {
  it('displays the user id from the route', () => {
    renderWithRouter(<UserProfile />, { route: '/users/42' });
    expect(screen.getByText('User ID: 42')).toBeInTheDocument();
  });

  it('handles missing user id gracefully', () => {
    renderWithRouter(<UserProfile />, { route: '/users' });
    expect(screen.getByText('User ID:')).toBeInTheDocument();
  });
});

Testing Navigation with MemoryRouter

To test that clicking a link navigates correctly, render the full route tree inside MemoryRouter and use userEvent to simulate clicks:

// src/App.test.jsx
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import App from './App';

describe('App navigation', () => {
  it('navigates to user profile when link is clicked', async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>
    );

    expect(screen.getByText('Welcome Home')).toBeInTheDocument();

    await user.click(screen.getByText('My Profile'));

    expect(screen.getByText('User Profile')).toBeInTheDocument();
  });

  it('renders 404 for unknown routes', () => {
    render(
      <MemoryRouter initialEntries={['/unknown-page']}>
        <App />
      </MemoryRouter>
    );

    expect(screen.getByText('404 - Page Not Found')).toBeInTheDocument();
  });
});

Testing Programmatic Navigation

Components that use useNavigate for redirects — such as login forms — need careful testing. You can verify navigation by rendering the full route tree and checking which component renders after the action:

// src/LoginForm.test.jsx
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();
  const handleSubmit = (e) => {
    e.preventDefault();
    navigate('/dashboard');
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Log In</button>
    </form>
  );
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

describe('LoginForm', () => {
  it('redirects to dashboard after login', async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter initialEntries={['/login']}>
        <Routes>
          <Route path="/login" element={<LoginForm />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </MemoryRouter>
    );

    await user.click(screen.getByText('Log In'));

    expect(screen.getByText('Dashboard')).toBeInTheDocument();
  });
});

Testing Protected Routes

Protected route wrappers are a common pattern. Test both authenticated and unauthenticated scenarios:

// src/ProtectedRoute.test.jsx
import { screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

function SecretPage() {
  return <h1>Secret Data</h1>;
}

function LoginPage() {
  return <h1>Please Log In</h1>;
}

describe('ProtectedRoute', () => {
  it('renders children when authenticated', () => {
    render(
      <MemoryRouter initialEntries={['/secret']}>
        <Routes>
          <Route path="/secret" element={
            <ProtectedRoute isAuthenticated={true}>
              <SecretPage />
            </ProtectedRoute>
          } />
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </MemoryRouter>
    );

    expect(screen.getByText('Secret Data')).toBeInTheDocument();
  });

  it('redirects to login when not authenticated', () => {
    render(
      <MemoryRouter initialEntries={['/secret']}>
        <Routes>
          <Route path="/secret" element={
            <ProtectedRoute isAuthenticated={false}>
              <SecretPage />
            </ProtectedRoute>
          } />
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </MemoryRouter>
    );

    expect(screen.getByText('Please Log In')).toBeInTheDocument();
    expect(screen.queryByText('Secret Data')).not.toBeInTheDocument();
  });
});

Testing Query Parameters and Location

Components that read query strings via useSearchParams or inspect useLocation can be tested by setting the initial route accordingly:

// src/SearchPage.test.jsx
import { screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { renderWithRouter } from './test-utils';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  return <div>Searching for: {query}</div>;
}

describe('SearchPage', () => {
  it('reads the query parameter from the URL', () => {
    renderWithRouter(<SearchPage />, { route: '/search?q=react+router' });
    expect(screen.getByText('Searching for: react router')).toBeInTheDocument();
  });

  it('shows empty query when no parameter exists', () => {
    renderWithRouter(<SearchPage />, { route: '/search' });
    expect(screen.getByText('Searching for:')).toBeInTheDocument();
  });
});

Integration Testing with Data Router

React Router v6.4+ introduced the data router with createBrowserRouter and loaders/actions. Testing these requires a different approach since the router is created outside the component tree. Use createMemoryRouter for tests:

// src/DataApp.test.jsx
import { screen, waitFor } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { createMemoryRouter, RouterProvider } from 'react-router-dom';

async function userLoader({ params }) {
  return { name: `User ${params.id}` };
}

function UserPage() {
  const data = useLoaderData();
  return <h1>{data.name}</h1>;
}

describe('Data router integration', () => {
  it('loads user data via loader', async () => {
    const router = createMemoryRouter(
      [
        {
          path: '/users/:id',
          loader: userLoader,
          element: <UserPage />,
        },
      ],
      { initialEntries: ['/users/99'] }
    );

    render(<RouterProvider router={router} />);

    await waitFor(() => {
      expect(screen.getByText('User 99')).toBeInTheDocument();
    });
  });
});

For loaders that fetch data, mock the fetch call using vi.fn() or a library like msw to avoid hitting real APIs during tests.

End-to-End Testing with Playwright

While unit and integration tests verify component behavior, E2E tests validate the full application in a real browser. Playwright is an excellent choice for testing React Router applications because it handles real navigation, URL changes, and browser history.

Setting Up Playwright

Initialize Playwright in your project:

npx playwright install
npx playwright init

This creates a playwright.config.js file and an e2e directory for your tests.

Writing E2E Navigation Tests

// e2e/navigation.spec.js
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  await page.goto('http://localhost:5173');
});

test('displays home page on initial load', async ({ page }) => {
  await expect(page.getByRole('heading', { name: 'Welcome Home' })).toBeVisible();
});

test('navigates to user profile via link', async ({ page }) => {
  await page.getByRole('link', { name: 'My Profile' }).click();
  await expect(page).toHaveURL(/\/users\/42$/);
  await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible();
});

test('shows 404 page for unknown routes', async ({ page }) => {
  await page.goto('http://localhost:5173/nonexistent');
  await expect(page.getByRole('heading', { name: '404 - Page Not Found' })).toBeVisible();
});

Testing Browser Back/Forward Navigation

// e2e/history.spec.js
import { test, expect } from '@playwright/test';

test('supports browser back and forward navigation', async ({ page }) => {
  await page.goto('http://localhost:5173');
  await expect(page.getByText('Welcome Home')).toBeVisible();

  await page.getByRole('link', { name: 'My Profile' }).click();
  await expect(page).toHaveURL(/\/users\/42$/);

  await page.goBack();
  await expect(page).toHaveURL('http://localhost:5173/');
  await expect(page.getByText('Welcome Home')).toBeVisible();

  await page.goForward();
  await expect(page).toHaveURL(/\/users\/42$/);
});

Testing Protected Route Redirects

// e2e/auth.spec.js
import { test, expect } from '@playwright/test';

test('redirects unauthenticated users to login', async ({ page }) => {
  await page.goto('http://localhost:5173/secret');
  await expect(page).toHaveURL(/\/login$/);
  await expect(page.getByText('Please Log In')).toBeVisible();
});

Best Practices

• Use MemoryRouter for unit tests. It avoids polluting test output with real browser history and lets you control the initial route precisely.
• Create a custom render helper. A reusable renderWithRouter function keeps tests DRY and consistent across the codebase.
• Test behavior, not implementation. Assert on what the user sees (text, URLs, visible elements) rather than internal router state.
• Mock loaders and API calls. Use msw or vi.fn() to keep data router tests fast and deterministic.
• Test both happy and edge cases. Include missing parameters, unknown routes, and unauthenticated access in your test suite.
• Keep E2E tests focused on critical flows. Reserve Playwright tests for user journeys like login, checkout, and navigation — not for every component.
• Use waitFor for async loaders. Data router tests involve asynchronous data loading, so wrap assertions in waitFor to avoid flaky failures.
• Isolate router setup per test. Avoid sharing router instances between tests to prevent state leakage and false positives.

Conclusion

Testing React Router components effectively requires understanding the different layers of your application and choosing the right tool for each. Unit tests with MemoryRouter give you fast, isolated feedback on individual components. Integration tests with createMemoryRouter validate loaders, actions, and data flow. E2E tests with Playwright confirm that real users can navigate your app as expected in an actual browser. By combining all three layers and following best practices like custom render helpers, behavior-driven assertions, and proper mocking, you build a robust safety net that catches routing bugs early and gives you confidence to refactor freely. Start with unit tests for individual route components, add integration tests for data-loading flows, and finish with a focused set of E2E tests for your most critical user journeys.