🎨 Rendering Components with Jest

Learn to render and test React components.

Basic Render

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

test('renders button', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Testing with Props

test('renders with props', () => {
  render(<Greeting name="Alice" />);
  expect(screen.getByText('Hello, Alice')).toBeInTheDocument();
});

Snapshot Testing

test('matches snapshot', () => {
  const { container } = render(<UserCard user={{ id: 1, name: 'Alice' }} />);
  expect(container).toMatchSnapshot();
});

Conditional Rendering

test('shows loading state', () => {
  render(<DataLoader isLoading={true} />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

test('shows data when loaded', () => {
  render(<DataLoader isLoading={false} data={{ name: 'Alice' }} />);
  expect(screen.getByText('Alice')).toBeInTheDocument();
});

✅ Key Takeaways

• Use **render()** to render components

• Access elements via **screen**

• Test with different **props**

• Use **snapshots** for regression testing