✨ Jest Testing Best Practices

Write maintainable, effective tests.

Test Behavior, Not Implementation

// GOOD: Tests visible behavior
test('shows clicked message', async () => {
  render(<Button />);
  await userEvent.click(screen.getByRole('button'));
  expect(screen.getByText('Clicked!')).toBeInTheDocument();
});

Use Semantic Queries

// GOOD: Semantic query
const button = screen.getByRole('button', { name: /submit/i });

// AVOID: CSS selectors
const button = document.querySelector('.submit-btn');

Test User Workflows

test('user can login', async () => {
  render(<LoginPage />);
  
  await userEvent.type(
    screen.getByLabelText('Email'),
    'user@example.com'
  );
  await userEvent.type(
    screen.getByLabelText('Password'),
    'password'
  );
  await userEvent.click(screen.getByRole('button'));
  
  expect(await screen.findByText('Welcome!')).toBeInTheDocument();
});

Write Clear Test Names

// GOOD: Describes what is tested
test('displays user name from props', () => {});
test('submits form with correct data', () => {});

// AVOID: Vague names
test('works', () => {});

Focus Each Test

// GOOD: One focus per test
test('renders loading state', () => {
  render(<DataLoader isLoading={true} />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

Mock External Dependencies

jest.mock('./api');

test('handles API error', async () => {
  fetchUser.mockRejectedValue(new Error('Network error'));
  render(<UserProfile />);
  expect(await screen.findByText('Network error')).toBeInTheDocument();
});

✅ Key Takeaways

• Test **user behavior** not implementation

• Use **semantic queries**

• Test complete **workflows**

• Write **clear test names**

• Mock **external dependencies**

• Keep tests **focused**

• Aim for **meaningful coverage**