Project‐Testing

🧪 Testing

테스트 구성

개발 공통 지침의 테스팅 원칙(판정 질문 11개)을 쇼핑몰 · 관리자 코드에 대입해, 필수 · 조건부에 해당하는 항목만 테스트한다. 테스트할 기능인지는 "돈 · 입력 · 권한 · 개인정보 · 여러 곳 저장 · 핵심 흐름 · 버그 수정"에 해당하는지로 정하고, 화면 모양만 바꾸는 작업은 테스트하지 않는다.

판정	분야
해당	금액 · 입력검증 · 권한 · 개인정보 · 원자성 · 핵심흐름 · 회귀 · 클라이언트상태 · 반응형
해당 없음	인증(로그인 없음, 비회원 주문조회는 권한으로 분류) · 외부연동(외부 API 호출 없음, 결제는 데모)

종류	개수	위치	실행
단위 · 컴포넌트	25 (쇼핑몰 20 · 관리자 5)	tests/unit	pnpm test
통합 (서버 + 테스트 DB)	35 (쇼핑몰 16 · 관리자 19)	tests/integration	pnpm test:integration
E2E (데스크톱 4 · 모바일 2)	6 (쇼핑몰 4 · 관리자 2)	tests/e2e	pnpm test:e2e

주요 항목

• 금액: 배송비 경계값(29,999 · 30,000원), 수량 0 · 100개 거부, 선물 포장 금액, 가격 필드를 끼워 보내면 거부 · DB 가격으로 합계 저장
• 입력검증: 필드별 안내 문구, 전화번호 · 이메일 형식, 실패 시 주문 미저장
• 권한: 주문번호 + 연락처가 맞을 때만 접근 쿠키, 틀리면 같은 실패 메시지, 만료 · 위조 · 다른 주문 토큰 거부
• 개인정보: 마스킹 규칙, 주문 상세 응답에 원본 이름 · 연락처 · 주소 없음
• 원자성: 주문 · 주문 상품 · 판매수가 함께 저장(상품 수정일 그대로), 없는 상품이면 전부 미저장, 판매수 갱신이 실패하면 주문도 롤백
• 회귀: 최신순일 때 카테고리 칩을 눌러도 정렬 유지 (PR #10에서 고친 버그 — 수정 전 코드에서 실패하는 것을 확인)
• 관리자: 틀린 · 빈 · 문자열이 아닌 비밀번호 거부, 편집 대상이 아닌 값 무시, 상품 삭제 후에도 주문 기록 유지, 주문 취소 · 복원 시 판매수 증감(중복 취소는 그대로), 일괄 상태 변경, 목록 · 상세 마스킹, 이미 삭제된 상품 안내
• 핵심흐름 (E2E): 상세 → 장바구니 → 주문서 → 결제 → 완료, 주문조회 → 마스킹된 상세, 빈 주문서 오류 → 수정 → 주문, 관리자 상태 변경 · 일괄 변경 · 틀린 비밀번호, 모바일 구매 흐름 · 관리자 접수 탭. 모든 E2E에서 콘솔 에러가 없는지 함께 확인

---

도구 선정

선정 기준: 실무 사용량(주간 다운로드), 유지 상태(최근 릴리스), 기존 도구로 할 수 없는 테스트가 있는지. 버전은 출시 2주 이상 지난 정확한 버전으로 고정했다. (2026-10-09 확인)

도구	버전	주간 다운로드	최근 릴리스	쓰는 이유
jest	30.5.2	5,682만	2026-09-18	README에 정한 테스트 러너. Next.js 공식 설정(next/jest) 지원
jest-environment-jsdom	30.5.2	2,922만	2026-09-18	컴포넌트 · store를 브라우저처럼 실행 (Next.js 문서 권장)
@jest/globals	30.5.2	(jest 동봉)	2026-09-18	ESM 통합 테스트에서 jest.unstable_mockModule 사용
@testing-library/react	16.3.3	7,993만	2026-08-27	사용자 행동 기준 컴포넌트 테스트
@testing-library/dom	10.4.2	9,753만	2026-09-13	react 테스트 라이브러리의 필수 동반 패키지
@testing-library/jest-dom	7.0.1	8,527만	2026-08-09	화면 검증 매처(toBeInTheDocument 등)
@testing-library/user-event	14.6.7	6,889만	2026-09-02	실제 클릭 · 입력 순서를 흉내 냄
@types/jest	30.0.0	5,219만	2025-06-16	Jest 30 타입 (메이저 버전에 맞춰 나오는 패키지라 정상)
@playwright/test	1.63.0	8,616만	2026-09-04	E2E. Next.js 공식 가이드, 모바일 에뮬레이션 · 서버 자동 실행 내장

쓰지 않은 도구

• ts-node: 마지막 릴리스 2023-12. Jest 설정을 .mjs로 써서 필요 없음
• MSW: 외부 API 호출이 없음
• @axe-core/playwright: 접근성은 UX 검수에서 다룸

---

설정에서 결정한 점

• 통합 테스트만 ESM으로 실행: Prisma 7이 생성한 클라이언트가 import.meta.url을 써서 CommonJS로는 불러올 수 없다. jest.integration.config.mjs만 .ts를 ESM으로 취급하고 --experimental-vm-modules로 실행한다. 가짜 모듈(next/cache · next/headers 등)은 jest.unstable_mockModule로 import 전에 등록한다.
• 테스트 전용 DB: figmamcp_test(.env.test). 통합 테스트는 시작할 때 마이그레이션을 처음부터 적용하고, 테스트마다 테이블을 비운 뒤 필요한 상품만 넣는다(테스트끼리 독립). 이름에 _test가 없으면 실행을 거부해 개발 DB를 건드리지 않는다.
• E2E는 프로덕션 빌드로: 테스트 DB를 시드한 뒤 pnpm build && pnpm start를 3800 포트에 띄운다(Playwright webServer). 실제 배포와 같은 캐시 · 렌더링 동작에서 확인하기 위해서다.
• 비동기 Server Component는 E2E로: Jest가 아직 지원하지 않는다(Next.js 문서).
• CI: GitHub Actions(.github/workflows/test.yml) — dev · main 대상 PR마다 Postgres 컨테이너를 띄워 lint · typecheck · 단위 · 통합 테스트와 E2E를 실행한다.