React · Testing

Component Testing

Master the art of testing React components - learn how to test rendering, props, state changes, events, and conditional logic with practical examples.

Find videos you like?

Save to resource drawer for future reference!

What is Component Testing?

Testing individual building blocks

Component testing focuses on testing individual React components in isolation. You verify that each component renders correctly, handles props properly, and responds to user interactions as expected.

Unlike integration or E2E tests, component tests are fast and focused. They help you catch bugs early and refactor with confidence!

Fast

Run hundreds of tests in seconds without a real browser.

Focused

Test one component at a time in isolation from others.

Reliable

Catch regressions immediately when you break something.

What Should You Test?

Focus on user-visible behavior

Test what users see and do, not how your component works internally. Here are the key areas:

✅ Test These

Rendering: Does the component appear on screen?
Props: Does it display data correctly?
User Events: Do clicks and inputs work?
Conditional Logic: Does it show/hide correctly?
State Changes: Does UI update when state changes?

❌ Don't Test These

×
Internal State: Don't access component.state
×
Implementation: Don't test function names
×
CSS Classes: Don't query by className
×
Component Structure: Don't test JSX structure
×
Third-Party Code: Don't test library internals

Try a Greeting Component

This component shows different content based on props. Perfect example for testing conditional rendering and props!

Conditional Rendering

Props Testing

Multiple States

Component Preview

See both logged-in and logged-out states

Greeting Component

Frontend

<div id="root"></div>

Live Preview

Loading preview...

Test 1: Testing Props

Verify component renders with different props

Testing Props Rendering

javascript

Check if the component displays the correct name

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

describe('Greeting Component - Props', () => {
  test('displays the user name when logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={true} />);
    
    // Query for text that includes the name
    const heading = screen.getByText(/Welcome, Sarah!/i);
    expect(heading).toBeInTheDocument();
  });

  test('displays welcome message for different users', () => {
    render(<Greeting name="John" isLoggedIn={true} />);
    
    expect(screen.getByText(/Welcome, John!/i)).toBeInTheDocument();
  });

  test('displays generic text with different props', () => {
    render(<Greeting name="Alice" isLoggedIn={true} />);
    
    expect(screen.getByText(/Great to see you again/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ Greeting Component - Props › displays the user name when logged in (18ms)

❯✓ Greeting Component - Props › displays welcome message for different users (12ms)

❯✓ Greeting Component - Props › displays generic text with different props (9ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ All props tests passed!

Test 2: Conditional Rendering

Test component behavior with different conditions

Testing Conditional Logic

javascript

Verify the component shows/hides content correctly

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

describe('Greeting Component - Conditional Rendering', () => {
  test('shows welcome message when logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={true} />);
    
    expect(screen.getByText(/Welcome, Sarah!/i)).toBeInTheDocument();
    expect(screen.queryByText(/Please log in/i)).not.toBeInTheDocument();
  });

  test('shows login prompt when not logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={false} />);
    
    expect(screen.getByText(/Please log in/i)).toBeInTheDocument();
    expect(screen.queryByText(/Welcome, Sarah!/i)).not.toBeInTheDocument();
  });

  test('shows correct message for logged out state', () => {
    render(<Greeting name="John" isLoggedIn={false} />);
    
    const loginPrompt = screen.getByText(/You must be logged in/i);
    expect(loginPrompt).toBeInTheDocument();
  });
});

Console Output

❯✓ Greeting Component - Conditional Rendering › shows welcome message when logged in (15ms)

❯✓ Greeting Component - Conditional Rendering › shows login prompt when not logged in (11ms)

❯✓ Greeting Component - Conditional Rendering › shows correct message for logged out state (10ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Conditional rendering works!

Test 3: State Changes

Test components that manage state

Testing State Updates

javascript

Verify state changes update the UI correctly

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter Component - State', () => {
  test('initializes with count of 0', () => {
    render(<Counter />);
    
    expect(screen.getByText(/Count: 0/i)).toBeInTheDocument();
  });

  test('increments count when button clicked', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    fireEvent.click(incrementBtn);
    
    expect(screen.getByText(/Count: 1/i)).toBeInTheDocument();
  });

  test('handles multiple increments', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    
    // Click 3 times
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    
    expect(screen.getByText(/Count: 3/i)).toBeInTheDocument();
  });

  test('resets count to 0', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    const resetBtn = screen.getByRole('button', { name: /reset/i });
    
    // Increment then reset
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    fireEvent.click(resetBtn);
    
    expect(screen.getByText(/Count: 0/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ Counter Component - State › initializes with count of 0 (14ms)

❯✓ Counter Component - State › increments count when button clicked (16ms)

❯✓ Counter Component - State › handles multiple increments (18ms)

❯✓ Counter Component - State › resets count to 0 (17ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 4 passed, 4 total

// ✅ State management works perfectly!

Test 4: User Events

Test click handlers and form inputs

Testing User Interactions

javascript

Verify buttons, inputs, and event handlers work

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchForm from './SearchForm';

describe('SearchForm Component - Events', () => {
  test('calls onSearch with input value when submitted', () => {
    const handleSearch = jest.fn();
    render(<SearchForm onSearch={handleSearch} />);
    
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button', { name: /search/i });
    
    // Type and submit
    fireEvent.change(input, { target: { value: 'React' } });
    fireEvent.click(button);
    
    expect(handleSearch).toHaveBeenCalledWith('React');
    expect(handleSearch).toHaveBeenCalledTimes(1);
  });

  test('clears input after submission', async () => {
    const user = userEvent.setup();
    render(<SearchForm onSearch={jest.fn()} />);
    
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button', { name: /search/i });
    
    // Type and submit
    await user.type(input, 'Testing');
    await user.click(button);
    
    expect(input).toHaveValue('');
  });

  test('does not call onSearch with empty value', () => {
    const handleSearch = jest.fn();
    render(<SearchForm onSearch={handleSearch} />);
    
    const button = screen.getByRole('button', { name: /search/i });
    fireEvent.click(button);
    
    // Should not be called with empty string
    expect(handleSearch).not.toHaveBeenCalled();
  });
});

Console Output

❯✓ SearchForm Component - Events › calls onSearch with input value when submitted (19ms)

❯✓ SearchForm Component - Events › clears input after submission (22ms)

❯✓ SearchForm Component - Events › does not call onSearch with empty value (11ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Event handlers working correctly!

Query Methods

How to find elements in your tests

React Testing Library provides several ways to query elements. Choose the right one for accessibility and reliability:

getBy*

Returns element or throws error if not found

getByRole('button')

getByText('Submit')

getByLabelText('Email')

✅ Best for elements that should exist

queryBy*

Returns null if not found (no error)

queryByText('Error')

queryByRole('alert')

✅ Best for checking if element is NOT there

findBy*

Waits for element to appear (async)

await findByText('Done')

await findByRole('status')

✅ Best for elements that appear after loading

Priority Order

1. getByRole (most accessible) → 2. getByLabelText → 3. getByPlaceholderText → 4. getByText → 5. getByTestId (last resort)

Component Testing Best Practices

Test Behavior, Not Implementation

Focus on what the user sees and does. If you refactor and tests still pass but the component is broken, you're testing the wrong things.

Use Accessible Queries

Prefer getByRole and getByLabelText. They ensure your app is accessible and tests mimic real users.

Test One Thing Per Test

Each test should verify one specific behavior. This makes failures easy to debug and tests easy to understand.

Clean Up After Tests

React Testing Library automatically cleans up after each test. But if you add timers or global listeners, clean them up in afterEach.

Key Takeaways

Test Rendering

Verify components render correctly with different props using render() and screen queries.

Test Props

Pass different props and verify the component displays the correct data.

Test State

Use fireEvent or userEvent to trigger state changes and verify UI updates.

Test Events

Simulate clicks, typing, and form submissions with fireEvent or userEvent.

Query Methods

Use getBy* for existing elements, queryBy* for absence, findBy* for async.

User-Centric

Always test from the user's perspective - what they see and do!

Ready for More?

You now know how to test component rendering, props, state, and events! Next topics:

Hook Testing - Test custom hooks in isolation
Async Testing - Handle loading states and API calls
Mocking - Isolate components with mocks and stubs

Previous Topic

Testing Overview

Introduction to React testing, Jest, React Testing Library, and testing philosophy.

Next Topic

Hook Testing

Test custom hooks with renderHook, act, and advanced hook testing patterns.

Ask a Question

Have a question about Component Testing? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Testing

Component Testing

Master the art of testing React components - learn how to test rendering, props, state changes, events, and conditional logic with practical examples.

Find videos you like?

Save to resource drawer for future reference!

What is Component Testing?

Testing individual building blocks

Component testing focuses on testing individual React components in isolation. You verify that each component renders correctly, handles props properly, and responds to user interactions as expected.

Unlike integration or E2E tests, component tests are fast and focused. They help you catch bugs early and refactor with confidence!

Fast

Run hundreds of tests in seconds without a real browser.

Focused

Test one component at a time in isolation from others.

Reliable

Catch regressions immediately when you break something.

What Should You Test?

Focus on user-visible behavior

Test what users see and do, not how your component works internally. Here are the key areas:

✅ Test These

Rendering: Does the component appear on screen?
Props: Does it display data correctly?
User Events: Do clicks and inputs work?
Conditional Logic: Does it show/hide correctly?
State Changes: Does UI update when state changes?

❌ Don't Test These

×
Internal State: Don't access component.state
×
Implementation: Don't test function names
×
CSS Classes: Don't query by className
×
Component Structure: Don't test JSX structure
×
Third-Party Code: Don't test library internals

Try a Greeting Component

This component shows different content based on props. Perfect example for testing conditional rendering and props!

Conditional Rendering

Props Testing

Multiple States

Component Preview

See both logged-in and logged-out states

Greeting Component

Frontend

<div id="root"></div>

Live Preview

Loading preview...

Test 1: Testing Props

Verify component renders with different props

Testing Props Rendering

javascript

Check if the component displays the correct name

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

describe('Greeting Component - Props', () => {
  test('displays the user name when logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={true} />);
    
    // Query for text that includes the name
    const heading = screen.getByText(/Welcome, Sarah!/i);
    expect(heading).toBeInTheDocument();
  });

  test('displays welcome message for different users', () => {
    render(<Greeting name="John" isLoggedIn={true} />);
    
    expect(screen.getByText(/Welcome, John!/i)).toBeInTheDocument();
  });

  test('displays generic text with different props', () => {
    render(<Greeting name="Alice" isLoggedIn={true} />);
    
    expect(screen.getByText(/Great to see you again/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ Greeting Component - Props › displays the user name when logged in (18ms)

❯✓ Greeting Component - Props › displays welcome message for different users (12ms)

❯✓ Greeting Component - Props › displays generic text with different props (9ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ All props tests passed!

Test 2: Conditional Rendering

Test component behavior with different conditions

Testing Conditional Logic

javascript

Verify the component shows/hides content correctly

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

describe('Greeting Component - Conditional Rendering', () => {
  test('shows welcome message when logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={true} />);
    
    expect(screen.getByText(/Welcome, Sarah!/i)).toBeInTheDocument();
    expect(screen.queryByText(/Please log in/i)).not.toBeInTheDocument();
  });

  test('shows login prompt when not logged in', () => {
    render(<Greeting name="Sarah" isLoggedIn={false} />);
    
    expect(screen.getByText(/Please log in/i)).toBeInTheDocument();
    expect(screen.queryByText(/Welcome, Sarah!/i)).not.toBeInTheDocument();
  });

  test('shows correct message for logged out state', () => {
    render(<Greeting name="John" isLoggedIn={false} />);
    
    const loginPrompt = screen.getByText(/You must be logged in/i);
    expect(loginPrompt).toBeInTheDocument();
  });
});

Console Output

❯✓ Greeting Component - Conditional Rendering › shows welcome message when logged in (15ms)

❯✓ Greeting Component - Conditional Rendering › shows login prompt when not logged in (11ms)

❯✓ Greeting Component - Conditional Rendering › shows correct message for logged out state (10ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Conditional rendering works!

Test 3: State Changes

Test components that manage state

Testing State Updates

javascript

Verify state changes update the UI correctly

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter Component - State', () => {
  test('initializes with count of 0', () => {
    render(<Counter />);
    
    expect(screen.getByText(/Count: 0/i)).toBeInTheDocument();
  });

  test('increments count when button clicked', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    fireEvent.click(incrementBtn);
    
    expect(screen.getByText(/Count: 1/i)).toBeInTheDocument();
  });

  test('handles multiple increments', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    
    // Click 3 times
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    
    expect(screen.getByText(/Count: 3/i)).toBeInTheDocument();
  });

  test('resets count to 0', () => {
    render(<Counter />);
    
    const incrementBtn = screen.getByRole('button', { name: /increment/i });
    const resetBtn = screen.getByRole('button', { name: /reset/i });
    
    // Increment then reset
    fireEvent.click(incrementBtn);
    fireEvent.click(incrementBtn);
    fireEvent.click(resetBtn);
    
    expect(screen.getByText(/Count: 0/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ Counter Component - State › initializes with count of 0 (14ms)

❯✓ Counter Component - State › increments count when button clicked (16ms)

❯✓ Counter Component - State › handles multiple increments (18ms)

❯✓ Counter Component - State › resets count to 0 (17ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 4 passed, 4 total

// ✅ State management works perfectly!

Test 4: User Events

Test click handlers and form inputs

Testing User Interactions

javascript

Verify buttons, inputs, and event handlers work

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchForm from './SearchForm';

describe('SearchForm Component - Events', () => {
  test('calls onSearch with input value when submitted', () => {
    const handleSearch = jest.fn();
    render(<SearchForm onSearch={handleSearch} />);
    
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button', { name: /search/i });
    
    // Type and submit
    fireEvent.change(input, { target: { value: 'React' } });
    fireEvent.click(button);
    
    expect(handleSearch).toHaveBeenCalledWith('React');
    expect(handleSearch).toHaveBeenCalledTimes(1);
  });

  test('clears input after submission', async () => {
    const user = userEvent.setup();
    render(<SearchForm onSearch={jest.fn()} />);
    
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button', { name: /search/i });
    
    // Type and submit
    await user.type(input, 'Testing');
    await user.click(button);
    
    expect(input).toHaveValue('');
  });

  test('does not call onSearch with empty value', () => {
    const handleSearch = jest.fn();
    render(<SearchForm onSearch={handleSearch} />);
    
    const button = screen.getByRole('button', { name: /search/i });
    fireEvent.click(button);
    
    // Should not be called with empty string
    expect(handleSearch).not.toHaveBeenCalled();
  });
});

Console Output

❯✓ SearchForm Component - Events › calls onSearch with input value when submitted (19ms)

❯✓ SearchForm Component - Events › clears input after submission (22ms)

❯✓ SearchForm Component - Events › does not call onSearch with empty value (11ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Event handlers working correctly!

Query Methods

How to find elements in your tests

React Testing Library provides several ways to query elements. Choose the right one for accessibility and reliability:

getBy*

Returns element or throws error if not found

getByRole('button')

getByText('Submit')

getByLabelText('Email')

✅ Best for elements that should exist

queryBy*

Returns null if not found (no error)

queryByText('Error')

queryByRole('alert')

✅ Best for checking if element is NOT there

findBy*

Waits for element to appear (async)

await findByText('Done')

await findByRole('status')

✅ Best for elements that appear after loading

Priority Order

1. getByRole (most accessible) → 2. getByLabelText → 3. getByPlaceholderText → 4. getByText → 5. getByTestId (last resort)

Component Testing Best Practices

Test Behavior, Not Implementation

Focus on what the user sees and does. If you refactor and tests still pass but the component is broken, you're testing the wrong things.

Use Accessible Queries

Prefer getByRole and getByLabelText. They ensure your app is accessible and tests mimic real users.

Test One Thing Per Test

Each test should verify one specific behavior. This makes failures easy to debug and tests easy to understand.

Clean Up After Tests

React Testing Library automatically cleans up after each test. But if you add timers or global listeners, clean them up in afterEach.

Key Takeaways

Test Rendering

Verify components render correctly with different props using render() and screen queries.

Test Props

Pass different props and verify the component displays the correct data.

Test State

Use fireEvent or userEvent to trigger state changes and verify UI updates.

Test Events

Simulate clicks, typing, and form submissions with fireEvent or userEvent.

Query Methods

Use getBy* for existing elements, queryBy* for absence, findBy* for async.

User-Centric

Always test from the user's perspective - what they see and do!

Ready for More?

You now know how to test component rendering, props, state, and events! Next topics:

Hook Testing - Test custom hooks in isolation
Async Testing - Handle loading states and API calls
Mocking - Isolate components with mocks and stubs

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Testing Overview

Hook Testing

Building Your Learning Module...

Component Testing

Fast

Focused

Reliable

Try a Greeting Component

Greeting Component

Priority Order

Test Behavior, Not Implementation

Use Accessible Queries

Test One Thing Per Test

Clean Up After Tests

Test Rendering

Test Props

Test State

Test Events

Query Methods

User-Centric

Ready for More?

Testing Overview

Hook Testing

Component Testing

Fast

Focused

Reliable

Try a Greeting Component

Greeting Component

Priority Order

Test Behavior, Not Implementation

Use Accessible Queries

Test One Thing Per Test

Clean Up After Tests

Test Rendering

Test Props

Test State

Test Events

Query Methods

User-Centric

Ready for More?