블로그 시리즈 **「프론트엔드 테스트 제대로 하기」**의 실습용 companion 저장소입니다. Companion repository for the blog series "Frontend Testing, Done Right".
Stack: React · Vite · TypeScript · Vitest · Testing Library · MSW · Playwright · @axe-core/playwright
🖥️ 라이브 데모 · Live demo: https://isaaceryn.github.io/frontend-testing-lab/ — 설치 없이 데모 앱을 바로 체험할 수 있습니다 (MSW 목 데이터로 동작). ⚡ 코드 바로 열기 · Open in StackBlitz: https://stackblitz.com/github/IsaacEryn/frontend-testing-lab — 브라우저에서 코드 탐색·실행.
npm install
npm run dev # 개발 서버 (MSW 목 데이터로 /api 동작) · dev server
npm test # 단위·컴포넌트 테스트 (Vitest) · unit & component
npm run test:watch # 감시 모드 (TDD) · watch mode
npm run typecheck # 테스트·e2e 포함 타입 검사 · typecheck incl. tests
npm run coverage # 커버리지 (앱 코드만 측정) · coverage
npm run e2e # E2E + 접근성 (Playwright) · 최초 1회: npx playwright install사용자 검색 대시보드 — 폼·목록·검색·비동기 fetch를 담은 최소 실전 앱. 모든 테스트 유형(단위 → 컴포넌트 → E2E → 접근성)을 자연스럽게 연습하기 위한 표면적입니다.
| 경로 | 설명 |
|---|---|
src/lib/ |
순수 함수 (단위 테스트 대상) — debounce·analytics는 앱에서 쓰이진 않는 학습용 독립 예제입니다 |
src/components/ |
React 컴포넌트 (Testing Library) |
src/mocks/ |
MSW 핸들러 · 서버(Node) · 워커(브라우저) |
src/test/setup.ts |
테스트 셋업 (jest-dom, MSW 라이프사이클) |
e2e/ |
Playwright E2E + axe 접근성 스캔 |
.github/workflows/ |
CI (테스트·타입체크·빌드·E2E 게이트) |
public/mockServiceWorker.js |
MSW가 생성한 워커 — CI/클론 직후에도 dev 목업이 바로 돌도록 의도적으로 커밋했습니다 (MSW 업데이트 시 npx msw init public으로 재생성) |
main 브랜치는 완성된 참고 구현입니다. 각 편의 종료 상태는 step-* 태그로 제공됩니다
(연재 진행에 따라 추가). 독자는 git checkout step-N으로 해당 편 상태를 재현할 수 있어요.
| 편 | 주제 | 태그 |
|---|---|---|
| 3 | 프로젝트 세팅 & Vitest | step-03 |
| 4~6 | 단위: 기초·비동기·테스트 더블 | step-04 ~ step-06 |
| 7~10 | 컴포넌트: RTL·user-event·MSW·접근성 쿼리 | step-07 ~ step-10 |
| 11~16 | E2E: Playwright·로케이터·픽스처·디버깅·axe·시각회귀 | step-11 ~ step-16 |
| 17~18 | 자동화: CI·커버리지 | step-17 ~ step-18 |
| 19~22 | AI 시대의 테스트 | step-19 ~ step-22 |
현재
main에는 단위·컴포넌트·E2E·접근성 예제가 모두 포함된 참고 구현이 들어 있습니다. 편별step-*태그는 각 글이 발행되는 시점에 순차적으로 추가됩니다.
codeslog.com — 「프론트엔드 테스트 제대로 하기」 시리즈
MIT