[Feat] 프로필 페이지 E2E 테스트 코드 작성

.gitignore

@@ -42,3 +42,11 @@ next-env.d.ts
 
 *storybook.log
 storybook-static
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

e2e/tests/profile.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+
+test('나의 프로필 페이지로 접속 시 마이페이지로 리다이렉트 되는 지 테스트', async ({ page }) => {
+  // 나의 프로필 페이지 방문
+  await page.goto('/profile/1');
+
+  // redirect 대기
+  await expect(page).toHaveURL('/mypage');
+});
+
+test('존재하지 않는 프로필 페이지로 접속 시 404 리다이렉트 되는 지 테스트', async ({ page }) => {
+  // 존재하지 않는 프로필 페이지 방문
+  await page.goto('/profile/4');
+
+  // redirect 대기
+  await expect(page.getByTestId('not-found-user')).toBeVisible();
+});

jest.config.js

@@ -12,8 +12,8 @@ const customJestConfig = {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-  coveragePathIgnorePatterns: ['/node_modules/'],
-  testPathIgnorePatterns: ['/node_modules/'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/.next/', '/e2e/'],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/e2e/'],
   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx}',
     '!src/**/*.d.ts',

package.json

@@ -13,7 +13,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "sprite": "node scripts/sprite/generate-sprite.cjs"
+    "test:playwright": "playwright test",
+    "test:playwright:ui": "playwright test --ui"
   },
   "devEngines": {
     "runtime": {
@@ -61,6 +62,7 @@
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/eslintrc": "^3",
     "@faker-js/faker": "^10.1.0",
+    "@playwright/test": "^1.57.0",
     "@storybook/addon-a11y": "^10.0.5",
     "@storybook/addon-docs": "^10.0.5",
     "@storybook/nextjs": "^10.1.4",
@@ -79,6 +81,7 @@
     "@typescript-eslint/parser": "^8.46.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "chromatic": "^13.3.4",
+    "dotenv": "^17.2.3",
     "eslint": "^9",
     "eslint-config-next": "16.0.1",
     "eslint-config-prettier": "^10.1.8",

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import dotenv from 'dotenv';
+import path from 'path';
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e/tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/app/(user)/profile/not-found.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 const ProfileNotFound = () => {
   return (
-    <div>
+    <div data-testid='not-found-user'>
       <h2>존재하지 않는 유저입니다.</h2>
       <Link href='/'>메인으로 돌아가기</Link>
     </div>

src/mock/index.ts

@@ -1,6 +1,6 @@
 // src/mocks/index.ts
 
-import { SetupWorker } from 'msw/browser';
+import type { SetupWorker } from 'msw/browser';
 
 import { handlers } from './handlers';
 
@@ -11,23 +11,16 @@ declare global {
   }
 }
 
-const config = {
-  enabledInDevelopment: true,
-  enabledInProduction: true,
-  onUnhandledRequest: 'bypass' as const, // bypass | warn | error
-};
-
 export const initMocks = async () => {
   // MSW 활성화 여부 확인
-  const isDev = process.env.NODE_ENV === 'development';
-  const shouldEnable = isDev ? config.enabledInDevelopment : config.enabledInProduction;
+  const shouldEnable = process.env.NEXT_PUBLIC_MSW_ENABLED === 'true';
   if (!shouldEnable) return;
 
   if (typeof window === 'undefined') {
     // Server
     const { server } = await import('./server');
     server.listen({
-      onUnhandledRequest: config.onUnhandledRequest,
+      onUnhandledRequest: 'bypass',
     });
     console.log('🔶 MSW Server ready');
   } else {
@@ -41,7 +34,7 @@ export const initMocks = async () => {
       worker.use(...handlers);
       // 최초 실행: start()
       await worker.start({
-        onUnhandledRequest: config.onUnhandledRequest,
+        onUnhandledRequest: 'bypass',
       });
       console.log('🔷 MSW Client ready');
     } else {