test: 훅에 필요한 테스트 추가 (#358)

* refactor: useAuth에서 return하는 함수들의 이름에 하는 일의 의미를 담도록 수정 * chore: 테스트를 위한 라이브러리 설치 * chore: jest사용을 위한 환경 세팅 * chore: 테스트가 있으므로 폴더 내부로 파일 이동 * test: 이벤트 아이디를 반환하는 훅인 useEventId 테스트 로직 작성 * chore: jest 환경 세팅 파일도 컴파일 할 수 있도록 tsconfig include에 추가 * test: 토큰과 로그인을 위한 useAuth 훅 테스트 작성 * chore: polyfills와 path alias세팅 추가 * chore: useFetch를 apis에서 hooks로 이동 * feat: 새로 추가된 에러 코드에 대한 메세지 추가 * chore: 파일 이동에 따른 수정 * feat: useAuth훅이 eventId를 스스로 호출하도록 함 * refactor: 객체를 쿼리스트링으로 바꾸는 함수를 분리 * chore: 불필요한 콘솔로그 제거 * test: 모든 테스트 사전에 실행되어야 하는 모킹 수행 * chore: 불필요한 콘솔로그 제거 * test: auth 도메인의 msw 모킹 함수 구현 * chore: jsdom환경에서 실행할 msw server 세팅 * refactor: withEventId 타입을 사용하도록 수정 * test: 이벤트를 생성하기 위한 useEvent 훅을 위한 테스트 코드 작성 * test: api 요청과 에러 상태 조작을 위한 useFetch 훅의 테스트 코드 작성 * chore: useFetch 파일 이동으로 인한 수정 * chore: 파일 이동 * refactor: captureError 함수를 useFetch로부터 분리 * test: 이벤트 도메인을 위한 msw 모킹 함수 구현 * chore: 불필요한 폴더는 커버리지 분석에 포함되지 않도록 함 * chore: jsdom 테스트를 위한 라이브러리 설치 * feat: 환경변수에 저장된 서버 도메인이 없는 경우 빈 문자열을 사용하도록 수정 * feat: useError가 error도 return하도록 수정 * chore: test 명령어 추가 * test: 멤버 목록을 위한 모킹 함수 작성 * test: 멤버를 지우는 useDeleteMemberAction의 테스트 코드 작성 * test: 로그를 위한 useStepList 훅의 테스트 코드 작성 * test: 정산 현황 조회에서 이름 검색 결과를 위한 useSearchMemberReportList 훅의 테스트 코드 작성 * chore: test환경에서의 location과 pathname 세팅 * chore: tsconfig에 jest 추가 * chore: 콘솔로그 제거 * fix: 바뀐 endpoint로 변경 * chore: 위치 변경으로 인한 수정 * chore: 위치 변경으로 인한 수정 * chore: 경로 모킹 로직을 setup으로 위임 * chore: 사용하지 않는 파일 제거 * chore: lint 적용 * chore: useFetch를 위해 핸들링 되는, 되지 않는 에러를 뱉는 모킹 함수 구현 * test: stepList와 관련된 api 모킹 함수 구현 * test: 정산 내역과 관련된 api 모킹 함수 구현 * chore: lint 적용 * test: test에 사용하는 상수 선언 * chore: stepListHandler에 합쳐진 모킹 함수 파일 제거 * test: 정상인 경우를 먼저 판단하도록 조건문 순서 변경 * test: 정산 내역 목데이터 선언 * test: 멤버 목록 목데이터 선언 * test: 프로젝트에서 사용되는 도메인의 모킹 핸들러를 export * test: 지출 내역을 위한 useStepList 훅의 테스트 코드 작성 * chore: 테스트를 위한 라이브러리 설치 * chore: CI과정에서 test를 진행하도록 명령어 추가 * test: provider안에서 호출되지 않으면 에러를 뱉는 로직의 테스트 코드 작성 * chore: 불필요한 파일이 coverage 에 뜨지 않도록 추가 * test: useDeleteMemberAction 훅의 삭제 요청에서 오류가 발생했을 경우 삭제할 멤버 목록을 원래대로 돌려놓는 지 확인하는 테스트 코드 작성 * test: Error, FetchError 인 경우에 대해 올바르게 에러를 핸들링하는지 테스트 코드 작성 * test: 에러를 발생시키기 위해 음수 actionId가 들어온 경우 에러 반환 * feat: 불필요한 alert문 제거 * chore: toEqual -> toStrictEqual로 변경 * chore: 린트 적용 * fix: endpoint를 잘못 기재한 부분 수정 * chore: 파일이동에 따른 경로 수정 * chore: 린트 적용 * chore: 파일이동에 따른 경로 수정 * feat: 비밀번호 길이인 4를 상수화해 사용하도록 수정 * test: 요청 성공시 어떤 값을 반환하는지 구체적으로 테스트 이름에 명시 * chore: 린트 적용 * test: 토큰의 다양한 에러 타입에 대해 테스트하기 위한 상수 선언 * test: 토큰 내용에 따라 forbidden, expired 에러를 뱉도록 분기 추가 * test: 토큰이 forbidden, expired 일 경우 에러를 반환하는지 테스트 코드 작성 * chore: 디자인 시스템 라이브러리 업데이트 * feat: production에서만 sentry 에 로그를 보내도록 함 * chore: 린트 적용 * chore: 999라는 오류가 발생하는 멤버를 포함하는 stepList 목데이터 작성 * chore: 외부에서 사용하지 않는 함수 return에서 제거 * test: memberActionList를 typeNarrowing으로 정제하여 사용하도록 수정 * test: 삭제 요청에서 오류가 발생하는 경우를 테스트하기 위해 오류 데이터가 포함된 stepList 목데이터를 사용하도록 수정 * test: stepList 데이터가 채워진 후 테스트를 진행하도록 waitFor 추가 * test: 에러 시연을 위해 actionId가 999인 경우 에러 응답을 반환하도록 변경 * chore: 불필요한 주석 제거 * chore: 린트 적용 * chore: import 경로 수정
woowacourse-teams · Aug 16, 2024 · cd775ba · cd775ba
1 parent a5bf87a
commit cd775ba
Show file tree

Hide file tree

Showing 56 changed files with 11,037 additions and 4,978 deletions.
diff --git a/.github/workflows/frontend-pull-request.yml b/.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
diff --git a/client/jest.config.ts b/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;
diff --git a/client/jest.polyfills.ts b/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},
+});
diff --git a/client/jest.setup.ts b/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());