Example react navigation testing

navigation-example.test.tsx

import { render, screen } from '@testing-library/react';
import { createMemoryRouter, RouterProvider, useNavigate, Link } from 'react-router-dom';
import userEvent from '@testing-library/user-event';
import React from 'react';

/**
 * Example component that uses useNavigate hook and Link
 * This is a dummy component for demonstration purposes
 */
const MyComponent: React.FC = () => {
	const navigate = useNavigate();

	const handleNavigateToHome = () => {
		navigate('/home');
	};

	const handleNavigateBack = () => {
		navigate(-1);
	};

	return (
		<div>
			<h1>My Component</h1>
			<button onClick={handleNavigateToHome}>Go to Home</button>
			<Link state={{ from: 'example' }} to="/dashboard">
				Go to Dashboard
			</Link>
			<button onClick={handleNavigateBack}>Go Back</button>
		</div>
	);
};

/**
 * Example test file demonstrating best practices for testing navigation
 * with MemoryRouter and useNavigate hook
 */
describe('MyComponent - Navigation Tests', () => {
	beforeEach(() => {
		// Common initialization code for all tests
	});

	afterEach(() => {
		// Common cleanup code for all tests
		jest.clearAllMocks();
	});

	it('navigates to /home when "Go to Home" button is clicked', async () => {
		// Arrange
		const router = createMemoryRouter(
			[
				{
					path: '/',
					element: <MyComponent />,
				},
				{
					path: '/home',
					element: <div>Home Page</div>,
				},
			],
			{ initialEntries: ['/'] }
		);

		render(<RouterProvider router={router} />);
		const user = userEvent.setup();

		// Act
		const homeButton = screen.getByRole('button', { name: /go to home/i });
		await user.click(homeButton);

		// Assert
		expect(screen.getByText('Home Page')).toBeInTheDocument();
		expect(router.state.location.pathname).toBe('/home');
	});

	it('navigates to /dashboard with state when "Go to Dashboard" link is clicked', async () => {
		// Arrange
		const router = createMemoryRouter(
			[
				{
					path: '/',
					element: <MyComponent />,
				},
				{
					path: '/dashboard',
					element: <div>Dashboard Page</div>,
				},
			],
			{ initialEntries: ['/'] }
		);

		render(<RouterProvider router={router} />);
		const user = userEvent.setup();

		// Act
		const dashboardLink = screen.getByRole('link', { name: /go to dashboard/i });
		await user.click(dashboardLink);

		// Assert
		expect(screen.getByText('Dashboard Page')).toBeInTheDocument();
		expect(router.state.location.pathname).toBe('/dashboard');
		expect(router.state.location.state).toEqual({ from: 'example' });
	});

	it('navigates back when "Go Back" button is clicked', async () => {
		// Arrange
		const router = createMemoryRouter(
			[
				{
					path: '/',
					element: <MyComponent />,
				},
				{
					path: '/previous',
					element: <div>Previous Page</div>,
				},
			],
			{ initialEntries: ['/previous', '/'] }
		);

		render(<RouterProvider router={router} />);
		const user = userEvent.setup();

		// Verify we're on the initial route
		expect(screen.getByText('My Component')).toBeInTheDocument();

		// Act
		const backButton = screen.getByRole('button', { name: /go back/i });
		await user.click(backButton);

		// Assert
		expect(screen.getByText('Previous Page')).toBeInTheDocument();
		expect(router.state.location.pathname).toBe('/previous');
	});

	it('renders component correctly on initial route', () => {
		// Arrange
		const router = createMemoryRouter(
			[
				{
					path: '/',
					element: <MyComponent />,
				},
			],
			{ initialEntries: ['/'] }
		);

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

		// Assert
		expect(screen.getByText('My Component')).toBeInTheDocument();
		expect(screen.getByRole('button', { name: /go to home/i })).toBeInTheDocument();
		expect(screen.getByRole('link', { name: /go to dashboard/i })).toBeInTheDocument();
		expect(router.state.location.pathname).toBe('/');
	});
});