Component Testing Basics in Jest

From the Jest cheat sheet · Testing React Components · verified Jul 2026

Component Testing Basics

Testing React components with React Testing Library

javascript

// Basic component test
import { render, screen, fireEvent } from '@testing-library/react'
import Button from './Button'

test('renders button with text', () => {
  render(<Button>Click me</Button>)
  const button = screen.getByText(/click me/i)
  expect(button).toBeInTheDocument()
})

// Testing events
test('calls onClick handler', () => {
  const handleClick = jest.fn()
  render(<Button onClick={handleClick}>Click</Button>)

  fireEvent.click(screen.getByText('Click'))
  expect(handleClick).toHaveBeenCalledTimes(1)
})

// Testing async components
test('loads user data', async () => {
  render(<UserProfile id={1} />)

  expect(screen.getByText(/loading/i)).toBeInTheDocument()

  const userName = await screen.findByText('John Doe')
  expect(userName).toBeInTheDocument()
})

💡 Use userEvent over fireEvent for more realistic interactions

⚡ Create custom render function to wrap providers

📌 MSW is excellent for mocking API calls in tests

🟢 Always await user interactions with userEvent.setup()

reactcomponentstesting-library

Back to the full Jest cheat sheet