test: 모든 리뷰 페이지 e2e 테스트코드 작성

src/__TEST__/reviews/page.test.tsx.bak → src/__TEST__/reviews/page.test.tsx

@@ -1,56 +1,59 @@
 import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/reviews');
-  // 네트워크 활동이 없을 때까지 기다림 (데이터 로딩 포함)
-  await page.waitForLoadState('networkidle');
+  await page.goto('/reviews', { waitUntil: 'networkidle' });
+
+  test.slow();
 });
 
 // 페이지 정상 로드 확인
 test('render title, score and reviews', async ({ page }) => {
   // Head 타이틀 확인
-  await expect(page.locator('h2')).toContainText('모든 리뷰');
+  await expect(page.getByRole('heading', { name: '모든 리뷰' })).toBeVisible();
 
   // Score 데이터가 최초 3.7인지 확인
-  expect(page.getByTestId('average-score')).toHaveText('3.7');
+  await expect(page.getByTestId('average-score')).toHaveText('3.7');
 
   // 최초 리뷰 데이터가 10개인지 확인 (서버사이드로 렌더링 된 데이터)
-  expect(page.getByTestId('review-item')).toHaveCount(10);
+  await expect(page.getByTestId('review-item')).toHaveCount(10);
 });
 
 test.describe('change score data when clicked tab or chip', () => {
   test('average score is 5 When clicked WORKATION tab ', async ({ page }) => {
-    await page.click('[data-testid="tab-WORKATION"]');
-    const workationScore = page.getByTestId('average-score');
-    await workationScore.waitFor();
-    expect(workationScore).toHaveText('5');
+    await page.getByTestId('tab-WORKATION').click();
+
+    const score = page.getByTestId('average-score');
+    await score.waitFor();
+    await expect(score).toHaveText('5');
   });
 
   test('average score is 3.7 When clicked DALLAEMFIT tab ', async ({
     page,
   }) => {
-    await page.click('[data-testid="tab-DALLAEMFIT"]');
-    const dallaemfitScore = page.getByTestId('average-score');
-    await dallaemfitScore.waitFor();
-    expect(dallaemfitScore).toHaveText('3.7');
+    await page.getByTestId('tab-DALLAEMFIT').click();
+
+    const score = page.getByTestId('average-score');
+    await score.waitFor();
+    await expect(score).toHaveText('3.7');
   });
 
   test('average score is 3.5 When clicked OFFICE STRETCHING chip ', async ({
     page,
   }) => {
     await page.locator('span').getByText('오피스 스트레칭').click();
-    const officeStretchingScore = page.getByTestId('average-score');
-    await officeStretchingScore.waitFor();
-    expect(officeStretchingScore).toHaveText('3.5');
+
+    const score = page.getByTestId('average-score');
+    await score.waitFor();
+    await expect(score).toHaveText('3.5');
   });
 
   test('average score is 5 When clicked MINDFULNESS chip ', async ({
     page,
   }) => {
     await page.locator('span').getByText('마인드풀니스').click();
-    const mindfulnessScore = page.getByTestId('average-score');
-    await mindfulnessScore.waitFor();
-    expect(mindfulnessScore).toHaveText('5');
+    const score = page.getByTestId('average-score');
+    await score.waitFor();
+    await expect(score).toHaveText('5');
   });
 });
 
@@ -60,31 +63,35 @@ test('filter reviews by location', async ({ page }) => {
   // 건대입구 필터링 시 리뷰 아이템이 10개인지 확인
   await page.getByTestId('filter-component').getByText('지역 전체').click();
   const filterOptions1 = page.locator('span').getByText('건대입구');
-  await filterOptions1.waitFor();
+  await filterOptions1.waitFor({ state: 'visible' });
   await filterOptions1.click();
 
   expect(page.getByTestId('review-item')).toHaveCount(10);
 
   // 신림 필터링 시 리뷰 아이템이 0개인지 확인
   await page.getByTestId('filter-component').getByText('건대입구').click();
   const filterOptions2 = page.locator('span').getByText('신림');
-  await filterOptions2.waitFor();
+  await filterOptions2.waitFor({ state: 'visible' });
   await filterOptions2.click();
 
-  expect(page.getByTestId('review-item')).toHaveCount(0);
+  await expect(page.getByText('아직 리뷰가 없어요')).toBeVisible();
+  const count = await page.getByTestId('review-item').count();
+  expect(count).toBe(0);
 });
 
 // 무한스크롤 테스트
 test('infinite scroll', async ({ page }) => {
   // 리뷰 아이템이 10개인지 확인
-  expect(page.getByTestId('review-item')).toHaveCount(10);
+  await expect(page.getByTestId('review-item')).toHaveCount(10);
 
   // 스크롤 이벤트
   await page.getByTestId('hasMoreRef').scrollIntoViewIfNeeded();
 
   // 추가로 10개의 리뷰 아이템이 렌더링 되었는지 확인
-  await page.waitForSelector('[data-testid="review-item"]:nth-child(20)');
-  expect(page.getByTestId('review-item')).toHaveCount(20);
+  const item20th = page.getByTestId('review-item').nth(19);
+  await item20th.waitFor({ state: 'visible' });
+
+  await expect(page.getByTestId('review-item')).toHaveCount(20);
 });
 
 // 리뷰 아이템 클릭 시 상세 페이지로 이동 확인

src/instrumentation.ts

@@ -4,6 +4,8 @@ export async function register() {
     process.env.NEXT_RUNTIME === 'nodejs'
   ) {
     const { server } = await import('./msw/server');
-    server.listen();
+    server.listen({
+      onUnhandledRequest: 'bypass',
+    });
   }
 }

src/msw/handlers.ts

@@ -22,10 +22,10 @@ export const handlers = [
 
   /*
    * GET
-   * /reviews/score
+   * /reviews/scores
    */
   http.get(
-    `${process.env.NEXT_PUBLIC_API_BASE_URL}/reviews/score`,
+    `${process.env.NEXT_PUBLIC_API_BASE_URL}/reviews/scores`,
     ({ request }) => {
       const url = new URL(request.url);
       const queryParam = qs.parse(url.searchParams.toString());