← POSTS

TDD 도입

TDDJestVitest테스트JavaScript

Jest vs Vitest

서로 기본적인 사용법은 거의 흡사함. (고급 테스팅 문법을 제외하면 사용되는 문법이 같음)

  • Jest

    • 가장 많이 쓰는 JS/TS 테스팅 도구.
    • 생태계가 풍부하고 Create React App 같은 템플릿에서 기본 탑재.
    • 장점: 안정적, Mock 기능 강력.
    • 단점: Vite 기반 프로젝트에선 설정이 약간 무겁거나 느릴 수 있음.

  • Vitest

    • Vite 프로젝트라면 추천.
    • Vite의 빠른 HMR과 빌드 파이프라인을 그대로 사용해서 빠름.
    • Jest API와 호환성이 높아 마이그레이션 쉬움.
    • 단점: 매우 복잡한 mocking에서는 Jest보다 불편할 수 있음.

👉 Vite 기반이면 Vitest

👉 CRA/Next.js 등 전통적인 환경이면 Jest

assertion & 도우미 라이브러리

  • @testing-library/react → 컴포넌트 테스트 표준.
  • @testing-library/user-event → 사용자가 실제로 클릭/타이핑하는 흐름 시뮬레이션.
  • msw (Mock Service Worker) → API 통신 Mock.
  • Cypress → 통합 테스트(E2E)까지 고려한다면.

TDD flow

‘실패하는 테스트 코드 작성 → 테스트를 통과하는 동작 코드 작성 → 피드백 → 코드 개선’

  • 유닛 테스트: 함수/컴포넌트 단위.
  • 통합 테스트: 여러 컴포넌트/함수가 함께 작동하는지.
  • E2E 테스트(Cypress): 실제 사용 흐름 전체.

AAA 구조

기본 구조는 AAA 패턴 — Arrange → Act → Assert

  1. Arrange: 필요한 props/mock/state 준비
  2. Act: 사용자 동작 시뮬레이션 (예: 버튼 클릭)
  3. Assert: 결과를 기대값과 비교

강의 및 참고 문서

강의

참고 문서