E2E 테스트

GitHub Push
  → Vercel Preview 배포 생성
  → GitHub Actions에서 감지
  → playwright e2e 실행 (*.vercel.app 도메인 대상)
  → mocks/handlers.ts의 MSW 핸들러로 API mocking

# apps/app 디렉토리에서
 
# Vercel Preview를 대상으로 실행 (CI 환경)
yarn e2e
 
# 로컬 개발 서버(port 3100)를 띄우고 실행
yarn e2e:app

apps/app/
├── e2e/
│   ├── tests/
│   │   ├── identity-verification.spec.ts           # 본인인증 플로우 테스트
│   │   ├── listing-create.spec.ts                  # 집주인 인증(listing/create) 플로우 테스트
│   │   ├── listing-certification-progress.spec.ts  # 인증 진행 현황 상태별 테스트
│   │   ├── funnel.spec.ts                          # funnel 패키지 동작 테스트
│   │   └── _dev-test.spec.ts                       # 로컬 전용 임시 테스트 (_prefix → CI 제외)
│   └── mocks/
│       ├── handlers.ts                              # MSW 핸들러 정의
│       └── utils.ts                                 # MSW 헬퍼 유틸
└── src/app/e2e/                                     # E2E 테스트 전용 페이지 (프로덕션에서 차단)
    └── funnel/                                      # funnel 패키지 테스트용 페이지
        ├── landing/page.tsx
        ├── single/page.tsx
        ├── nested/page.tsx
        └── redirect-target/page.tsx

// 컴포넌트
<Button data-testid="btn-start">시작하기</Button>
<li data-testid={`carrier-option-${carrier.key}`}>{carrier.label}</li>
<Alert testId="alert-wrong-info" ... />

// 테스트
page.getByTestId('btn-start')
page.getByTestId('carrier-option-SKT')
page.getByTestId('alert-wrong-info').waitFor()
page.getByTestId('alert-btn-ok').click()   // Alert 확인 버튼

compiler: {
  // VERCEL_ENV === 'production'일 때만 제거 (preview 배포에서는 유지)
  reactRemoveProperties: process.env.VERCEL_ENV === 'production'
    ? { properties: ['^data-testid$'] }
    : false,
}

import {createMSWResolver} from './utils';
 
http.post(
  howmuchhomeApiOrigin + '/api/' + getAPIPath(AuthAPI.createAuthIdentityVerification),
  createMSWResolver(async ({request}) => {
    const body = await request.json();
    return HttpResponse.json({ ... });
  }),
)

import {e2eRequestBodyDeepEqual} from '../../msw/utils';
 
createMSWResolver(async ({request}) => {
  const body = await request.json();
 
  if (e2eRequestBodyDeepEqual(body, { name: '이름', ... })) {
    return HttpResponse.json({ authIdentityVerification: { id: 'abc', ... } });
  }
 
  // 매칭되지 않으면 에러 응답
  return HttpResponse.json(
    { errorCode: 'IDENTITY_VERIFICATION_NAME_INVALID' },
    { status: 400 },
  );
})

import {mswGetAccesstoken, mswGetRequestBody} from './utils';
 
// Authorization 헤더에서 Bearer 토큰 추출
const token = mswGetAccesstoken(request);  // → 'token' | undefined
 
// request body를 camelCase로 변환하여 반환
const body = await mswGetRequestBody<MyRequestType>(request);

// 1. 온보딩 진입
await page.getByTestId('btn-start').click();
await page.getByTestId('btn-agree-all').click();
 
// 2. 폼 단계 진입 확인
await page.getByTestId('splash-phone-title').waitFor();
await page.getByTestId('form-title').waitFor();
 
// 3. 이름 입력 및 유효성 검사
const submitButton = page.getByTestId('btn-form-submit');
await expect(submitButton).toBeDisabled();
 
await nameInput.fill('이름');
await nameInput.clear();
await expect(page.getByText('필수로 입력해야하는 정보에요')).toHaveCount(1);
 
// 4. 중복 인증 에러 처리
await nameInput.fill('이미 인증한 유저');
await submitButton.click();
await page.getByTestId('alert-duplicate-identity').waitFor();
await page.getByTestId('alert-btn-ok').click();
 
// 5. OTP 틀린 경우
await page.getByTestId('alert-wrong-otp').waitFor();
await page.getByTestId('alert-btn-ok').click();
 
// 6. OTP 정답 → 페이지 이동 확인
await page.waitForURL(/.*listingCreate.*/);

import {waitForHydration} from '../mocks/utils';
 
// 페이지 이동 직후 hydration 대기
await page.evaluate(url => location.replace(url), targetUrl);
await waitForHydration(page);  // MSW Service Worker 활성화 = hydration 완료
 
// 이제 안전하게 인터랙션 가능
await page.getByTestId('btn-start').click();

// 인증 완료 후 accesstoken 쿠키 검증
expect(
  (await context.cookies()).find(c => c.name === 'accesstoken')?.value
).toEqual('token');