Component Testing Pattern | Bootspring Docs

Test React components effectively with React Testing Library, including user interactions, async operations, context providers, and hooks.

Overview#

Component testing verifies that React components render correctly and respond to user interactions as expected. React Testing Library encourages testing from the user's perspective.

When to use:

Testing component rendering and output
Verifying user interactions work correctly
Testing form validation and submission
Testing components with context and hooks

Key features:

User-centric testing approach
Async operation handling
Accessibility-first queries
Context provider support

Code Example#

Basic Component Test#

// __tests__/components/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react'
import { vi, describe, it, expect } from 'vitest'
import { Button } from '@/components/ui/Button'

describe('Button', () => {
  it('renders with text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
  })

  it('calls onClick when clicked', () => {
    const handleClick = vi.fn()
    render(<Button onClick={handleClick}>Click me</Button>)

    fireEvent.click(screen.getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
  })

  it('renders with different variants', () => {
    const { rerender } = render(<Button variant="primary">Primary</Button>)
    expect(screen.getByRole('button')).toHaveClass('bg-blue-600')

    rerender(<Button variant="secondary">Secondary</Button>)
    expect(screen.getByRole('button')).toHaveClass('bg-gray-200')
  })

  it('shows loading state', () => {
    render(<Button loading>Submit</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
    expect(screen.getByTestId('spinner')).toBeInTheDocument()
  })
})

Testing with User Events#

// __tests__/components/Form.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { vi, describe, it, expect } from 'vitest'
import { ContactForm } from '@/components/ContactForm'

describe('ContactForm', () => {
  it('submits form with valid data', async () => {
    const user = userEvent.setup()
    const onSubmit = vi.fn()

    render(<ContactForm onSubmit={onSubmit} />)

    await user.type(screen.getByLabelText('Name'), 'John Doe')
    await user.type(screen.getByLabelText('Email'), 'john@example.com')
    await user.type(screen.getByLabelText('Message'), 'Hello, this is a test message')

    await user.click(screen.getByRole('button', { name: 'Submit' }))

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        name: 'John Doe',
        email: 'john@example.com',
        message: 'Hello, this is a test message'
      })
    })
  })

  it('shows validation errors', async () => {
    const user = userEvent.setup()
    render(<ContactForm onSubmit={vi.fn()} />)

    await user.click(screen.getByRole('button', { name: 'Submit' }))

    expect(await screen.findByText('Name is required')).toBeInTheDocument()
    expect(screen.getByText('Email is required')).toBeInTheDocument()
  })

  it('validates email format', async () => {
    const user = userEvent.setup()
    render(<ContactForm onSubmit={vi.fn()} />)

    await user.type(screen.getByLabelText('Email'), 'invalid-email')
    await user.click(screen.getByRole('button', { name: 'Submit' }))

    expect(await screen.findByText('Invalid email address')).toBeInTheDocument()
  })
})

Testing Async Components#

// __tests__/components/UserList.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import { vi, describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest'
import { UserList } from '@/components/UserList'
import { server } from '@/mocks/server'
import { http, HttpResponse } from 'msw'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

describe('UserList', () => {
  it('renders users after loading', async () => {
    server.use(
      http.get('/api/users', () => {
        return HttpResponse.json([
          { id: '1', name: 'Alice' },
          { id: '2', name: 'Bob' }
        ])
      })
    )

    render(<UserList />)

    expect(screen.getByText('Loading...')).toBeInTheDocument()

    await waitFor(() => {
      expect(screen.getByText('Alice')).toBeInTheDocument()
      expect(screen.getByText('Bob')).toBeInTheDocument()
    })
  })

  it('shows error message on failure', async () => {
    server.use(
      http.get('/api/users', () => {
        return HttpResponse.json({ error: 'Server error' }, { status: 500 })
      })
    )

    render(<UserList />)

    await waitFor(() => {
      expect(screen.getByText('Failed to load users')).toBeInTheDocument()
    })
  })

  it('shows empty state when no users', async () => {
    server.use(
      http.get('/api/users', () => {
        return HttpResponse.json([])
      })
    )

    render(<UserList />)

    await waitFor(() => {
      expect(screen.getByText('No users found')).toBeInTheDocument()
    })
  })
})

Testing with Context#

// __tests__/components/ThemeToggle.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { vi, describe, it, expect } from 'vitest'
import { ThemeProvider, useTheme } from '@/contexts/ThemeContext'
import { ThemeToggle } from '@/components/ThemeToggle'

function renderWithTheme(component: React.ReactNode, initialTheme = 'light') {
  return render(
    <ThemeProvider defaultTheme={initialTheme}>
      {component}
    </ThemeProvider>
  )
}

describe('ThemeToggle', () => {
  it('toggles theme on click', async () => {
    const user = userEvent.setup()
    renderWithTheme(<ThemeToggle />)

    const button = screen.getByRole('button')
    expect(button).toHaveAttribute('aria-label', 'Switch to dark mode')

    await user.click(button)
    expect(button).toHaveAttribute('aria-label', 'Switch to light mode')
  })

  it('starts with correct theme from context', () => {
    renderWithTheme(<ThemeToggle />, 'dark')

    const button = screen.getByRole('button')
    expect(button).toHaveAttribute('aria-label', 'Switch to light mode')
  })
})

// Test with custom wrapper
const AllProviders = ({ children }: { children: React.ReactNode }) => (
  <ThemeProvider>
    <AuthProvider>
      {children}
    </AuthProvider>
  </ThemeProvider>
)

const customRender = (ui: React.ReactElement) =>
  render(ui, { wrapper: AllProviders })

Testing Hooks#

// __tests__/hooks/useCounter.test.ts
import { renderHook, act } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { useCounter } from '@/hooks/useCounter'

describe('useCounter', () => {
  it('initializes with default value', () => {
    const { result } = renderHook(() => useCounter())
    expect(result.current.count).toBe(0)
  })

  it('initializes with provided value', () => {
    const { result } = renderHook(() => useCounter(10))
    expect(result.current.count).toBe(10)
  })

  it('increments count', () => {
    const { result } = renderHook(() => useCounter())

    act(() => {
      result.current.increment()
    })

    expect(result.current.count).toBe(1)
  })

  it('decrements count', () => {
    const { result } = renderHook(() => useCounter(5))

    act(() => {
      result.current.decrement()
    })

    expect(result.current.count).toBe(4)
  })

  it('resets to initial value', () => {
    const { result } = renderHook(() => useCounter(5))

    act(() => {
      result.current.increment()
      result.current.increment()
      result.current.reset()
    })

    expect(result.current.count).toBe(5)
  })
})

// Testing hooks with dependencies
describe('useDebounce', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  afterEach(() => {
    vi.useRealTimers()
  })

  it('debounces value changes', () => {
    const { result, rerender } = renderHook(
      ({ value }) => useDebounce(value, 500),
      { initialProps: { value: 'hello' } }
    )

    expect(result.current).toBe('hello')

    rerender({ value: 'world' })
    expect(result.current).toBe('hello') // Still old value

    act(() => {
      vi.advanceTimersByTime(500)
    })

    expect(result.current).toBe('world')
  })
})

Testing Server Components#

// __tests__/components/UserProfile.test.tsx
// For Server Components, test the rendered output
import { render, screen } from '@testing-library/react'
import { vi, describe, it, expect } from 'vitest'

// Mock the data fetching
vi.mock('@/lib/users', () => ({
  getUser: vi.fn().mockResolvedValue({
    id: '1',
    name: 'John Doe',
    email: 'john@example.com'
  })
}))

// Import after mocking
import { UserProfile } from '@/components/UserProfile'

describe('UserProfile', () => {
  it('renders user information', async () => {
    const Component = await UserProfile({ userId: '1' })
    render(Component)

    expect(screen.getByText('John Doe')).toBeInTheDocument()
    expect(screen.getByText('john@example.com')).toBeInTheDocument()
  })
})

// __tests__/components/Modal.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { vi, describe, it, expect } from 'vitest'
import { Modal } from '@/components/Modal'

describe('Modal', () => {
  it('renders when open', () => {
    render(
      <Modal isOpen={true} onClose={vi.fn()}>
        <p>Modal content</p>
      </Modal>
    )

    expect(screen.getByRole('dialog')).toBeInTheDocument()
    expect(screen.getByText('Modal content')).toBeInTheDocument()
  })

  it('does not render when closed', () => {
    render(
      <Modal isOpen={false} onClose={vi.fn()}>
        <p>Modal content</p>
      </Modal>
    )

    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
  })

  it('calls onClose when clicking backdrop', async () => {
    const user = userEvent.setup()
    const onClose = vi.fn()

    render(
      <Modal isOpen={true} onClose={onClose}>
        <p>Modal content</p>
      </Modal>
    )

    await user.click(screen.getByTestId('modal-backdrop'))
    expect(onClose).toHaveBeenCalled()
  })

  it('calls onClose when pressing Escape', async () => {
    const user = userEvent.setup()
    const onClose = vi.fn()

    render(
      <Modal isOpen={true} onClose={onClose}>
        <p>Modal content</p>
      </Modal>
    )

    await user.keyboard('{Escape}')
    expect(onClose).toHaveBeenCalled()
  })
})

Usage Instructions#

Install dependencies: npm install -D @testing-library/react @testing-library/user-event
Set up test environment: Configure jsdom in vitest.config.ts
Write component tests: Focus on user behavior and output
Use proper queries: Prefer accessible queries (getByRole, getByLabelText)
Handle async operations: Use waitFor and findBy queries

Best Practices#

Test from user perspective - Focus on what users see and do
Use accessible queries - Prefer getByRole, getByLabelText
Avoid implementation details - Don't test internal state
Use userEvent over fireEvent - More realistic user simulation
Test loading and error states - Cover all UI states
Keep tests focused - One behavior per test
Use screen queries - Cleaner than destructuring render result

Vitest - Test runner setup
Unit Testing - Testing utility functions
Mocking - Mocking dependencies
Snapshots - Snapshot testing