How to Test React Props

Testing props in React ensures that components render correctly and behave as expected when receiving different data inputs. This guide provides a straightforward, step-by-step approach to testing React props using Jest and React Testing Library. You will learn how to verify default prop values, test custom data rendering, and mock callback functions passed as props to ensure seamless component interaction.

To test React props effectively, the industry standard is to use React Testing Library (RTL) alongside Jest. RTL encourages testing components from the user’s perspective rather than testing internal implementation details.

Setting Up a Sample Component

Consider a simple UserProfile component that accepts three props: username, isAdmin (a boolean with a default value), and onLogout (a callback function).

// UserProfile.jsx
import React from 'react';

export default function UserProfile({ username, isAdmin = false, onLogout }) {
  return (
    <div>
      <h1>Welcome, {username}!</h1>
      {isAdmin && <p>Role: Administrator</p>}
      <button onClick={onLogout}>Logout</button>
    </div>
  );
}

Testing Standard Props

To test if the component correctly renders the passed props, render the component with specific prop values using RTL’s render method and assert that the corresponding elements appear in the DOM.

// UserProfile.test.jsx
import { render, screen } from '@testing-library/react';
import UserProfile from './UserProfile';

test('renders the username prop correctly', () => {
  render(<UserProfile username="Alex" />);

  // Assert that the text "Welcome, Alex!" is in the document
  const headingElement = screen.getByText('Welcome, Alex!');
  expect(headingElement).toBeInTheDocument();
});

Testing Conditional Props

When a prop controls conditional rendering (like isAdmin in the example), write separate test cases to verify the component’s behavior both when the prop is true and when it is false or omitted.

test('renders admin badge when isAdmin is true', () => {
  render(<UserProfile username="Alex" isAdmin={true} />);
  const adminText = screen.getByText('Role: Administrator');
  expect(adminText).toBeInTheDocument();
});

test('does not render admin badge when isAdmin is false', () => {
  render(<UserProfile username="Alex" isAdmin={false} />);
  const adminText = screen.queryByText('Role: Administrator');
  expect(adminText).not.toBeInTheDocument();
});

Testing Callback and Function Props

Components often pass functions as props to handle user interactions. To test these, use a Jest mock function (jest.fn()) as the prop value, simulate the user action using fireEvent or userEvent, and assert that the mock function was called.

import { fireEvent } from '@testing-library/react';

test('calls onLogout handler when button is clicked', () => {
  // Create a mock function
  const mockLogout = jest.fn();

  render(<UserProfile username="Alex" onLogout={mockLogout} />);

  // Find the button and simulate a click
  const buttonElement = screen.getByRole('button', { name: /logout/i });
  fireEvent.click(buttonElement);

  // Assert that the mock function was called exactly once
  expect(mockLogout).toHaveBeenCalledTimes(1);
});

Testing React props is a matter of rendering the component with specific inputs and asserting that the output UI reflects those inputs or triggers the correct side effects. By focusing on the rendered output rather than state internals, your tests remain robust and resilient to refactoring.