Next.js Testcode Playground

프론트엔드 테스트를 위한 Next.js 프로젝트입니다. 다양한 테스트 도구와 방법론을 작성해봤습니다.

사용된 테스트 라이브러리

단위 테스트 & 통합 테스트

• Jest: JavaScript 테스트 프레임워크
• React Testing Library: React 컴포넌트 테스트를 위한 유틸리티
• MSW (Mock Service Worker): API 모킹을 위한 라이브러리

E2E 테스트

• Playwright: 크로스 브라우저 E2E 테스트 프레임워크

테스트 종류 및 설명

단위 테스트 (Unit Tests)

RadioGroups 컴포넌트를 테스트 했습니다.

• 컴포넌트 렌더링 테스트

  • 컴포넌트가 올바르게 렌더링되는지 확인
  • 필수 props가 전달되었을 때의 동작 검증

통합 테스트 (Integration Tests)

PaymentForm 컴포넌트를 테스트 했습니다. 여러 컴포넌트 간의 상호작용과 API 통신을 테스트합니다.

• API 통합 테스트

  • React Query를 사용한 서버 상태 관리 테스트
  • MSW를 활용한 API 모킹
  • 예: 프로모션 사용자 상태에 따른 가격 계산

• 폼 제출 테스트

  • 사용자 입력과 서버 통신의 통합 테스트
  • 예: 결제 폼 제출 시 데이터 처리 및 API 호출

• 이벤트 핸들러 테스트

  • 사용자 상호작용에 대한 응답 검증
  • 예: 결제 수단 선택, 폼 제출 등의 이벤트 처리

E2E 테스트 (End-to-End Tests)

실제 사용자 시나리오를 시뮬레이션하여 전체 애플리케이션을 테스트합니다.

• 페이지 네비게이션 테스트

  • 페이지 간 이동 및 라우팅 검증
  • 예: 결제 페이지로의 이동 및 뒤로가기

• AB 테스트 검증

  • 실제 AB테스트 시나리오 기반 시뮬레이션
  • 예: A 케이스에선 프로모션 배너가 결제 페이지에서 보이게, B 케이스에선 프로모션 배너가 결제 완료 페이지에서 보이게

명령어

개발 서버 실행

npm run dev

단위 테스트 & 통합 테스트 실행

# 모든 테스트 실행
npm test

# 특정 파일의 테스트만 실행
npm test components/payment-form.test.tsx

# 테스트 감시 모드
npm test -- --watch

# 테스트 커버리지 리포트 생성
npm test -- --coverage

E2E 테스트 실행

# 모든 브라우저에서 E2E 테스트 실행
npm run test:e2e

# 특정 브라우저에서만 E2E 테스트 실행
npm run test:e2e -- --project=chromium

# UI 모드로 E2E 테스트 실행
npm run test:e2e -- --ui

# 특정 테스트 파일만 실행
npm run test:e2e tests/pages.spec.ts

테스트 파일 구조

├── components/           # React 컴포넌트
│   ├── payment-form.tsx
│   └── payment-form.test.tsx  # 단위/통합 테스트
├── e2e/                  # E2E 테스트
│   └── pages.spec.ts
├── mocks/               # MSW 핸들러
│   └── payment-handlers.ts
└── modules/             # 테스트 유틸리티
    └── test-utils.ts