Mocking the Router in Jest for Component Testing

Testing React components that rely on routing can be challenging. When a component uses hooks like useNavigate or useLocation from a routing library (like React Router), directly testing it in isolation can lead to errors or unpredictable behavior. This challenge will guide you through creating a robust mock for the React Router's useNavigate and useLocation hooks to enable effective component testing with Jest.

Problem Description

Your task is to create a Jest mock for key functions of the React Router library, specifically useNavigate and useLocation. This mock will allow you to test components that depend on these router functionalities without needing a full routing setup.

Key Requirements:

• Mock useNavigate: The mock should allow you to track calls to the navigate function, including the arguments passed to it. It should also expose a way to simulate different navigation states if necessary.
• Mock useLocation: The mock should return a predictable location object that can be controlled during tests, allowing you to simulate different URLs and their states.
• Integration with Jest: The mock should be easily importable and usable within your Jest test files.
• Flexibility: The mock should be flexible enough to handle various test scenarios without requiring extensive setup for each test.

Expected Behavior:

When a component under test calls useNavigate(), it should receive a mock function that records its usage. When it calls useLocation(), it should receive a mock location object.

Edge Cases:

• Testing components that conditionally render based on the current location.
• Testing components that trigger navigation on user interaction (e.g., button click).
• Testing components that rely on location state (e.g., location.state).

Examples

Example 1: Mocking useNavigate

Let's say you have a LoginButton component that calls navigate('/dashboard') when clicked.

// src/components/LoginButton.tsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const LoginButton: React.FC = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
};

export default LoginButton;

Your test would look like this:

// src/components/LoginButton.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import LoginButton from './LoginButton';
import { useNavigate } from 'react-router-dom'; // Import from the actual library

// Mock useNavigate before any imports that might use it
const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'), // Keep other exports
  useNavigate: () => mockNavigate,
}));

describe('LoginButton', () => {
  beforeEach(() => {
    // Clear mock calls before each test
    mockNavigate.mockClear();
  });

  test('calls navigate with correct path when clicked', () => {
    render(<LoginButton />);
    const button = screen.getByRole('button', { name: /login/i });
    fireEvent.click(button);

    expect(mockNavigate).toHaveBeenCalledTimes(1);
    expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
  });
});

Example 2: Mocking useLocation

Consider a UserProfile component that displays a user ID from the URL.

// src/components/UserProfile.tsx
import React from 'react';
import { useLocation } from 'react-router-dom';

const UserProfile: React.FC = () => {
  const location = useLocation();
  const userId = (location.pathname.split('/').pop() as string) || 'unknown';

  return <div>User ID: {userId}</div>;
};

export default UserProfile;

Your test would look like this:

// src/components/UserProfile.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';
import { useLocation } from 'react-router-dom';

// Mock useLocation before any imports that might use it
const mockLocation = { pathname: '', search: '', hash: '', state: null, key: '' };
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: () => mockLocation,
}));

describe('UserProfile', () => {
  test('displays the correct user ID based on location', () => {
    // Set the mock location for this specific test
    (useLocation as jest.Mock).mockReturnValue({
      ...mockLocation,
      pathname: '/users/123',
    });

    render(<UserProfile />);
    expect(screen.getByText('User ID: 123')).toBeInTheDocument();
  });

  test('displays "unknown" when no user ID is present', () => {
    (useLocation as jest.Mock).mockReturnValue({
      ...mockLocation,
      pathname: '/users/',
    });

    render(<UserProfile />);
    expect(screen.getByText('User ID: unknown')).toBeInTheDocument();
  });
});

Example 3: Combined Mocking and State

Testing a component that navigates and relies on location state.

// src/components/ProductDetail.tsx
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

interface Product {
  id: string;
  name: string;
}

const ProductDetail: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const product = location.state as Product | null;

  const handleGoBack = () => {
    navigate('/');
  };

  if (!product) {
    return <div>Product not found.</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>ID: {product.id}</p>
      <button onClick={handleGoBack}>Go Back</button>
    </div>
  );
};

export default ProductDetail;

Your test would require a more sophisticated mock setup:

// src/components/ProductDetail.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ProductDetail from './ProductDetail';
import { useLocation, useNavigate } from 'react-router-dom';

// Create a factory function for creating mocks
const createMockRouter = () => {
  const mockNavigate = jest.fn();
  const mockLocation = {
    pathname: '',
    search: '',
    hash: '',
    state: null,
    key: '',
  };

  jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useNavigate: () => mockNavigate,
    useLocation: () => mockLocation,
  }));

  return { mockNavigate, mockLocation };
};

describe('ProductDetail', () => {
  let mockNavigate: jest.Mock;
  let mockLocation: { pathname: string; search: string; hash: string; state: any; key: string };

  beforeEach(() => {
    // Reset mocks for each test
    jest.resetModules(); // Crucial to re-mock after reset
    const routerMocks = createMockRouter();
    mockNavigate = routerMocks.mockNavigate;
    mockLocation = routerMocks.mockLocation;
  });

  test('displays product details when location state is provided', () => {
    const productData = { id: 'p1', name: 'Example Product' };
    mockLocation.state = productData;
    mockLocation.pathname = '/products/p1';

    render(<ProductDetail />);

    expect(screen.getByText('Example Product')).toBeInTheDocument();
    expect(screen.getByText('ID: p1')).toBeInTheDocument();
  });

  test('displays "Product not found" when location state is missing', () => {
    mockLocation.state = null;
    mockLocation.pathname = '/products/p1';

    render(<ProductDetail />);

    expect(screen.getByText('Product not found')).toBeInTheDocument();
  });

  test('navigates to home when "Go Back" is clicked', () => {
    const productData = { id: 'p1', name: 'Example Product' };
    mockLocation.state = productData;
    mockLocation.pathname = '/products/p1';

    render(<ProductDetail />);
    const goBackButton = screen.getByRole('button', { name: /go back/i });
    fireEvent.click(goBackButton);

    expect(mockNavigate).toHaveBeenCalledTimes(1);
    expect(mockNavigate).toHaveBeenCalledWith('/');
  });
});

Constraints

• Your solution should use Jest and TypeScript.
• The mock should be designed for use with @testing-library/react.
• Avoid modifying the actual react-router-dom library.
• The mock should be efficient and not introduce significant overhead to your tests.

Notes

• Consider how to manage and update the state of your mocks across multiple tests within the same describe block. beforeEach and afterEach are your friends here.
• For more complex scenarios, you might want to create a helper function or a custom hook that encapsulates your router mocking logic.
• Remember that jest.mock needs to be called at the top level of a module, or within jest.isolateModules.
• When testing components that rely on useNavigate and useLocation, it's often beneficial to mock them together as they are intrinsically linked in routing.