[FE] 훅에 필요한 테스트 추가

.github/workflows/frontend-pull-request.yml

@@ -10,36 +10,40 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    
+
     defaults:
       run:
         shell: bash
         working-directory: ./client
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v4  
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Set up Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '20.15.1'
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.15.1'
 
-    - name: Install dependencies
-      working-directory: ./client
-      run: npm install  
+      - name: Install dependencies
+        working-directory: ./client
+        run: npm install
 
-    - name: Run lint
-      working-directory: ./client
-      run: npm run lint  
+      - name: Run lint
+        working-directory: ./client
+        run: npm run lint
+
+      - name: Run test
+        working-directory: ./client
+        run: npm run test
 
-    - name: Cypress test
-      run: npm run dev &
-      env:
-        CI: true
+      - name: Cypress test
+        run: npm run dev &
+        env:
+          CI: true
 
-    - name: Wait for the server to start
-      run: sleep 3
+      - name: Wait for the server to start
+        run: sleep 3
 
-    - name: Run Cypress tests
-      run: npm run cypress-run
+      - name: Run Cypress tests
+        run: npm run cypress-run

client/jest.config.ts

@@ -0,0 +1,43 @@
+import type {Config} from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest',
+  // testEnvironment: 'node', //  Node.js 모듈(fs, path, http 등)을 사용한 서버 사이드 로직이나 파일 시스템 접근, 네트워크 요청 등을 테스트
+  testEnvironment: 'jsdom', // 브라우저 내에서의 JavaScript 동작을 모방하여, DOM 조작, 이벤트 핸들링, 브라우저 관련 API 호출
+  transform: {
+    '^.+\\.ts?$': 'ts-jest',
+  },
+  collectCoverage: true,
+  coverageReporters: ['text'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/src/utils/',
+    '<rootDir>/src/mocks/',
+    '<rootDir>/src/apis/',
+    '<rootDir>/src/request/',
+    '<rootDir>/src/constants/',
+    '<rootDir>/src/errors/',
+    '<rootDir>/src/ErrorProvider.tsx',
+  ],
+
+  verbose: true,
+  setupFiles: ['./jest.polyfills.ts'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleNameMapper: {
+    '@/(.*)$': '<rootDir>/src/$1', // path alias를 적용하기 위함
+    '^@apis/(.*)$': '<rootDir>/src/apis/$1',
+    '^@constants/(.*)$': '<rootDir>/src/constants/$1',
+    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+    '^@pages/(.*)$': '<rootDir>/src/pages/$1',
+    '^@types/(.*)$': '<rootDir>/src/types/$1',
+    '^@errors/(.*)$': '<rootDir>/src/errors/$1',
+    '^@mocks/(.*)$': '<rootDir>/src/mocks/$1',
+  },
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
+};
+
+export default config;

client/jest.polyfills.ts

@@ -0,0 +1,20 @@
+import {TextDecoder, TextEncoder} from 'node:util';
+
+Object.defineProperties(globalThis, {
+  TextDecoder: {value: TextDecoder},
+  TextEncoder: {value: TextEncoder},
+});
+
+import {Blob, File} from 'node:buffer';
+
+import {fetch, Headers, FormData, Request, Response} from 'undici';
+
+Object.defineProperties(globalThis, {
+  fetch: {value: fetch, writable: true},
+  Blob: {value: Blob},
+  File: {value: File},
+  Headers: {value: Headers},
+  FormData: {value: FormData},
+  Request: {value: Request},
+  Response: {value: Response},
+});

client/jest.setup.ts

@@ -0,0 +1,22 @@
+import {server} from './src/mocks/server';
+import * as router from 'react-router';
+
+beforeAll(() => {
+  server.listen();
+
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value: {
+      ...window.location,
+      pathname: '/event/abc-123/', // 원하는 pathname 설정
+    },
+  });
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+beforeAll(() => {});
+jest.mock('./src/utils/captureError');
+jest.mock('./src/utils/sendLogToSentry');
+
+jest.spyOn(router, 'useNavigate').mockImplementation(() => jest.fn());