Jest 학습 로드맵

1단계: 기본 테스트 작성법

// 1. 기본적인 matcher 사용법
test('기본 테스트', () => {
  expect(2 + 2).toBe(4);
  expect({name: 'test'}).toEqual({name: 'test'});
  expect([1, 2, 3]).toContain(2);
});

// 2. 비동기 테스트
test('비동기 함수 테스트', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});

2단계: 컴포넌트 렌더링 테스트

// 상품 검색 컴포넌트 테스트
import { render, screen } from '@testing-library/react';

test('검색 입력창이 렌더링된다', () => {
  render(<SearchBar />);
  const searchInput = screen.getByPlaceholderText('상품을 검색하세요');
  expect(searchInput).toBeInTheDocument();
});

3단계: 사용자 인터랙션 테스트

// Todo 앱의 사용자 입력 테스트
import { render, fireEvent } from '@testing-library/react';

test('새로운 할 일을 추가할 수 있다', () => {
  render(<TodoApp />);
  const input = screen.getByPlaceholderText('할 일을 입력하세요');
  const addButton = screen.getByText('추가');

  fireEvent.change(input, { target: { value: '새로운 할 일' } });
  fireEvent.click(addButton);

  expect(screen.getByText('새로운 할 일')).toBeInTheDocument();
});

4단계: 상태 관리 테스트

// 상태 변화 테스트
test('카운터 상태 변화', () => {
  render(<Counter />);
  const incrementButton = screen.getByText('+');

  fireEvent.click(incrementButton);
  expect(screen.getByText('1')).toBeInTheDocument();
});

5단계: 컴포넌트 간 통신 테스트

// 부모-자식 컴포넌트 데이터 전달 테스트
test('자식 컴포넌트가 props를 올바르게 받는다', () => {
  render(<Parent />);
  const childElement = screen.getByTestId('child');
  expect(childElement).toHaveTextContent('전달된 데이터');
});

6단계: Mock 함수와 API 테스트

// API 호출 모킹
test('API 데이터 로딩', async () => {
  const mockData = [{ id: 1, name: '상품1' }];
  jest.spyOn(global, 'fetch').mockResolvedValue({
    json: () => Promise.resolve(mockData)
  });

  render(<ProductList />);
  const products = await screen.findByText('상품1');
  expect(products).toBeInTheDocument();
});

7단계: 통합 테스트 시나리오

// 검색 기능 통합 테스트
describe('상품 검색 기능', () => {
  beforeEach(() => {
    render(<ProductSearchApp />);
  });

  test('검색어 입력시 필터링된 결과가 보인다', () => {
    const searchInput = screen.getByRole('textbox');
    fireEvent.change(searchInput, { target: { value: '노트북' } });

    expect(screen.getByText('맥북')).toBeInTheDocument();
    expect(screen.queryByText('키보드')).not.toBeInTheDocument();
  });
});

학습 순서:

1. Jest 기본 문법과 matcher 사용법
2. 컴포넌트 렌더링 테스트
3. 이벤트 핸들링 테스트
4. 상태 관리 테스트
5. 컴포넌트 간 통신 테스트
6. API 통신 테스트
7. Mock 함수 활용
8. 통합 테스트 작성

주요 학습 포인트:

• Jest matcher 함수들의 사용법
• React Testing Library의 render, screen, fireEvent 활용
• 비동기 테스트 처리 방법
• Mock 함수 생성과 활용
• 테스트 케이스 구조화 (describe, beforeEach 등)
• 컴포넌트 테스트 전략 수립

이러한 순서로 학습하면서 실제 프로젝트의 테스트 케이스를 작성하면 효과적으로 Jest를 익힐 수 있습니다.