cs 앱 단위(Unit) 및 통합(Integration) 테스트 구축 결과 보고서

cs 애플리케이션 내의 컴포넌트 로직 검증 및 렌더링 검사 기능을 수행할 수 있도록 Vitest와 React Testing Library (RTL) 설정을 완료하고 샘플 코드를 생성했습니다.

변경 및 추가 사항 요약

1. 의존성 설치 및 스크립트 추가

apps/cs/package.json의 개발용 라이브러리로 다음 패키지들을 설치했습니다:
- vitest, @testing-library/react, @testing-library/jest-dom, jsdom, @vitejs/plugin-react, vite-tsconfig-paths
scripts 항목에 단위 테스트 실행 스크립트를 정의했습니다:
- "test:unit": "vitest run" (1회 실행)
- "test:unit:watch": "vitest" (실시간 Watch 모드)

2. 설정 파일 정의

vitest.config.ts:
- React 플러그인 및 tsconfig alias 경로 파싱을 연결했습니다.
- 테스트 환경으로 가상 브라우저 돔(jsdom)을 연결했습니다.
- Playwright E2E 테스트 스펙(*.spec.ts)과 충돌이 나지 않도록, 단위 테스트 범위를 tests/unit/**/*.{test,spec}.{ts,tsx} 경로로 제한했습니다.
setup-tests.ts:
- DOM 전역 단언식인 @testing-library/jest-dom을 확장했습니다.

3. 샘플 및 페이지 테스트 코드 생성

sample-counter.tsx:
- 상태값 관리(useState) 및 이벤트 처리, 5 초과 시의 경고문 조건부 렌더링 등이 구현된 React 컴포넌트입니다.
sample-counter.test.tsx:
- 기본 렌더링 검사 (초기 값 및 제목 텍스트 검증)
- 상태 변경 검사 (증가/감소 버튼 동작에 따른 값 업데이트 검증)
- 통합 조건부 검사 (5 초과 시의 경고 노출 여부 검증)
login-page.test.tsx:
- 실제 로그인 컴포넌트(LoginPage)를 대상으로 한 단위/통합 테스트 스위트입니다.
- UI 요소 검증: 타이틀 렌더링, ID/PW 입력 필드 및 로그인 버튼 존재 확인.
- 로그인 실패 케이스: authService.login API가 에러를 발생시킬 때 화면에 한글 에러 문구(아이디와 비밀번호가 일치하지 않습니다.)가 정상 표출되는지 검증.
- 로그인 성공 케이스: 정상적으로 로그인이 완료되었을 때 window.location.href 가 "/dashboard" 로 셋업되어 이동되는지 검증.
- Next.js next/image 컴포넌트 및 글로벌 window.location을 가상 돔 환경에 맞추어 적절하게 모킹 처리하였습니다.

검증 결과

터미널에서 pnpm --filter cs run test:unit 명령을 실행하여 모든 테스트(총 7개)가 정상 통과함을 검증하였습니다:

 RUN  v4.1.10 /Users/changwng/workspace.ona/frontend/apps/cs

 ✓ tests/unit/sample-counter.test.tsx (4 tests) 89ms
 ✓ tests/unit/login-page.test.tsx (3 tests) 148ms

 Test Files  2 passed (2)
      Tests  7 passed (7)
   Start at  14:04:03
   Duration  718ms (transform 160ms, setup 71ms, import 243ms, tests 237ms, environment 557ms)

속도 면에서 아주 빠르고 안정적으로 가상 돔 유닛 테스트 환경이 준비되었습니다.

3.5 KiB Raw Blame History