사이드 프로젝트 - FE 테스트 관련
생성일 : 2026.09.20 14:52
[학습해야할 내용]
FE (Next.js 기준, inote)
종류 | 도구(실무 표준) | 검증 대상 |
|---|---|---|
단위 테스트 | Vitest 또는 Jest | 순수 함수, 커스텀 훅 로직 |
컴포넌트 테스트 | Vitest/Jest + React Testing Library | 컴포넌트 렌더링/상호작용 (사용자 관점, 구현 디테일 X) |
E2E 테스트 | Playwright (요즘 대세) 또는 Cypress | 브라우저에서 실제 로그인→화면 이동 등 시나리오 |
시각적 회귀 (선택) | Chromatic, Percy | UI 스타일 깨짐 감지 (팀 커지면 도입) |
Next.js 16 기준으로는 Vitest + React Testing Library 조합이 요즘 가장 흔하고(Jest보다 빠름), E2E는 Playwright가 사실상 표준입니다.
[작업 해야할 내용 + 할 일 리스트에서 추가할 내용]
inote - main
> 단위 테스트 세팅
> 컴포넌트 테스트
> E2E 테스트
- 각각 테스트 내용이 무엇인지 작성하기