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을 가상 돔 환경에 맞추어 적절하게 모킹 처리하였습니다.
use-session-extend-confirm.test.ts:
- 세션 연장 팝업 제어용 공통 훅(useSessionExtendConfirm)에 대한 단위 테스트 스위트입니다.
- 기본 타이머 대기 검증: 토큰 만료 버퍼 도달 전까지는 컨펌창이 나타나지 않고, 해당 시점(예: 10초) 경과 후에 confirm이 정상 호출되는지 검증.
- 연장 승인 시나리오: 팝업에서 승인 시 silentRefresh()가 호출되고 갱신된 신규 토큰으로 재스케줄링되는지 검증.
- 연장 거절 시나리오: 팝업에서 거절 시 declineSessionExtend()가 호출되고, 해당 토큰에 대해서는 더 이상 팝업을 띄우지 않도록 무한 루프가 방지되는지 검증.
- 즉시 노출 시나리오: 이미 만료 버퍼 내인 경우 타이머 대기 없이 즉각적으로 컨펌창이 실행되는지 검증.
- 미동작 예외 시나리오: 비활성화 상태(enabled: false)이거나 이미 토큰이 완전히 만료된 경우 어떠한 스케줄도 잡지 않는지 검증.
- 가상 타이머(vi.useFakeTimers()) 및 마이크로태스크 큐 제어를 결합하여 비동기 훅의 작동 방식을 정밀하고 빠르게 시뮬레이션하였습니다.

4. Playwright E2E 테스트 코드 및 격리 스텁 뷰 추가

session-extend-confirm.spec.ts:
- 세션 연장 팝업의 만료 전 타이머 동작과 실제 화면 조작 및 훅 상호작용을 검증하는 브라우저 E2E 테스트 스펙입니다.
- 승인 E2E 시나리오: 만료 5분(버퍼 시간) 전 진입 시 리액트 HTML 모달 팝업이 노출되며, "확인" 버튼 클릭 시 리액트의 silentRefresh()가 트리거되고 모달이 닫히는 동작을 실 브라우저 상에서 검증.
- 거절 E2E 시나리오: 모달 팝업 노출 상태에서 "취소" 버튼 클릭 시 세션 연장 요청이 거절되고 모달이 닫히며, 이후 시간이 더 지나도 모달이 중복 재노출되지 않는 동작을 검증.
page.tsx:
- 실시간 API와 계정/시간 몽키패칭 부작용으로 인한 브라우저 락(Lock) 및 로그인 튕김 현상을 완벽하게 예방하기 위해 구축한 격리된 E2E 스텁 라우트입니다.
- /test-session 경로는 ConfirmProvider와 ConfirmDialog 래퍼가 마운트되는 기본 레이아웃 하위에서 작동하므로, 실 브라우저가 직접 마운트된 모달 HTML 요소를 안정적으로 감지하고 클릭할 수 있는 신뢰성 높은 환경을 제공합니다.

검증 결과

1. Vitest 단위 테스트 결과

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

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

 ✓ tests/unit/use-session-extend-confirm.test.ts (6 tests) 16ms
 ✓ tests/unit/sample-counter.test.tsx (4 tests) 94ms
 ✓ tests/unit/login-page.test.tsx (3 tests) 152ms

 Test Files  3 passed (3)
      Tests  13 passed (13)
   Start at  14:21:52
   Duration  819ms (transform 217ms, setup 109ms, import 367ms, tests 257ms, environment 1.04s)

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

2. Playwright E2E 테스트 결과

터미널에서 pnpm --filter cs exec playwright test tests/session-extend-confirm.spec.ts 명령을 실행하여, chromium, firefox, webkit 3대 주요 실 브라우저 환경에서 연장 성공 시 다음 팝업 억제 검증을 포함한 세션 연장 E2E 테스트(총 6개 스위트)가 100% 정상 통과함을 확인하였습니다:

Running 6 tests using 1 worker

  ✓  1 [chromium] › tests/session-extend-confirm.spec.ts:8:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 1. 세션 만료 5분(버퍼 시간) 전 도달 시 컨펌 다이얼로그가 자동 노출되고, 승인 시 연장 처리가 수행되어야 함 (11.6s)
  ✓  2 [chromium] › tests/session-extend-confirm.spec.ts:42:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 2. 컨펌 다이얼로그를 거절(Dismiss)한 경우 세션 연장 처리가 취소되고 재차 팝업이 노출되지 않아야 함 (9.8s)
  ✓  3 [firefox] › tests/session-extend-confirm.spec.ts:8:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 1. 세션 만료 5분(버퍼 시간) 전 도달 시 컨펌 다이얼로그가 자동 노출되고, 승인 시 연장 처리가 수행되어야 함 (16.4s)
  ✓  4 [firefox] › tests/session-extend-confirm.spec.ts:42:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 2. 컨펌 다이얼로그를 거절(Dismiss)한 경우 세션 연장 처리가 취소되고 재차 팝업이 노출되지 않아야 함 (15.3s)
  ✓  5 [webkit] › tests/session-extend-confirm.spec.ts:8:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 1. 세션 만료 5분(버퍼 시간) 전 도달 시 컨펌 다이얼로그가 자동 노출되고, 승인 시 연장 처리가 수행되어야 함 (11.1s)
  ✓  6 [webkit] › tests/session-extend-confirm.spec.ts:42:7 › 세션 연장 확인 팝업 (useSessionExtendConfirm) E2E 테스트 › 2. 컨펌 다이얼로그를 거절(Dismiss)한 경우 세션 연장 처리가 취소되고 재차 팝업이 노출되지 않아야 함 (9.9s)

  6 passed (1.3m)

이로써 단위/통합 테스트 환경과 연장 처리 성공 후 중복 팝업 억제 시나리오가 포함된 E2E 테스트 환경 구축 임무가 성공적으로 완결되었습니다.

8.8 KiB Raw Blame History Unescape Escape