단위 테스트(jest 테스트) 실행 시간 최적화

frontend/.env.test

@@ -1,2 +1,3 @@
 VOTOGETHER_BASE_URL=''
 VOTOGETHER_MOCKING_URL=''
+VOTOGETHER_MOCKING_DELAY = 0

frontend/.gitignore

@@ -3,3 +3,4 @@
 /dist
 localhost.pem
 localhost-key.pem
+/coverage

frontend/.husky/pre-push

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 cd frontend
-npm run test
+npm run husky-test

frontend/__test__/hooks/usePagination.test.tsx

@@ -113,7 +113,7 @@ describe('페이지 버튼을 눌러 공지 사항 리스트를 불러오는 지
     [4, 3, [1, 2, 3, 4]],
     [23, 20, [21, 22, 23]],
     [2, 0, [1, 2]],
-    [10, 3, [1, 2, 3, 4, 5]],
+    // [10, 3, [1, 2, 3, 4, 5]],
   ])(
     '전체 페이지가 %s이고, 현재 페이지가 %s라면 페이지 리스트는 %s를 반환한다. 현재 페이지는 0,1,2 와 같이 0으로 시작한다.',
     (totalPage, currentPage, expected) => {

frontend/jest.config.js

@@ -16,4 +16,5 @@ module.exports = {
   },
   setupFilesAfterEnv: ['./jest.setup.js'],
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  collectCoverageFrom: ['src/**/*.ts?(x)', '!src/components/**', '!src/pages/**'],
 };

frontend/package.json

@@ -15,7 +15,9 @@
     "lint": "eslint --cache .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "jest",
+    "test": "jest --watch",
+    "husky-test": "jest",
+    "coverage": "jest --coverage",
     "prepare": "cd .. && husky install frontend/.husky",
     "mac-local-ip": "ifconfig | grep \"inet \" | grep -v 127.0.0.1",
     "check-bundle": "webpack --config webpack.analyzer.js",

frontend/src/mocks/alarm.ts

@@ -1,13 +1,14 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_CONTENT_ALARM_LIST, MOCK_REPORT_ALARM_LIST } from './mockData/alarm';
 
 export const mockAlarm = [
   rest.get(`/alarms/content`, (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(200), ctx.json(MOCK_CONTENT_ALARM_LIST()));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(200), ctx.json(MOCK_CONTENT_ALARM_LIST()));
   }),
 
   rest.get(`/alarms/report`, (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(200), ctx.json(MOCK_REPORT_ALARM_LIST()));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(200), ctx.json(MOCK_REPORT_ALARM_LIST()));
   }),
 ];

frontend/src/mocks/comment.ts

@@ -1,17 +1,18 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_COMMENT_LIST } from './mockData/comment';
 
 export const mockComment = [
   rest.get(`/posts/:postId/comments`, (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(200), ctx.json(MOCK_COMMENT_LIST));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(200), ctx.json(MOCK_COMMENT_LIST));
   }),
 
   rest.post('/posts/:postId/comments', (req, res, ctx) => {
     window.console.log('등록한 댓글 내용', req.body);
 
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(201),
       ctx.json({ message: '댓글이 성공적으로 등록되었습니다!!' })
     );
@@ -21,13 +22,13 @@ export const mockComment = [
     window.console.log('수정한 댓글 내용', req.body);
 
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(200),
       ctx.json({ message: '댓글이 성공적으로 수정되었습니다!!' })
     );
   }),
 
   rest.delete('/posts/:postId/comments/:commentId', (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(204));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(204));
   }),
 ];

frontend/src/mocks/getVoteDetail.ts

@@ -1,18 +1,19 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_POST_INFO } from './mockData/post';
 import { MOCK_VOTE_RESULT } from './mockData/voteResult';
 
 export const mockVoteResult = [
   rest.get(`/posts/:postId`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(1000), ctx.json(MOCK_POST_INFO));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_POST_INFO));
   }),
 
   rest.get(`/posts/:postId/options`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(1000), ctx.json(MOCK_VOTE_RESULT));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_VOTE_RESULT));
   }),
 
   rest.get(`/posts/:postId/options/:optionId`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(1000), ctx.json(MOCK_VOTE_RESULT));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_VOTE_RESULT));
   }),
 ];

frontend/src/mocks/handlers.ts

@@ -13,6 +13,8 @@ import { mockToken } from './token';
 import { mockUserInfo } from './userInfo';
 import { mockVote } from './vote';
 
+export const MOCKING_DELAY = Number(process.env.VOTOGETHER_MOCKING_DELAY) ?? 1000;
+
 export const handlers = [
   ...example,
   ...mockPostList,

frontend/src/mocks/notice.ts

@@ -1,5 +1,6 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_NOTICE_LIST_RESPONSE, MOCK_NOTICE_RESPONSE } from './mockData/notice';
 
 export let MOCK_NOTICE_TEST = '';
@@ -10,19 +11,19 @@ export const mockNotice = [
 
     MOCK_NOTICE_TEST = data.title;
 
-    return res(ctx.status(200));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY));
   }),
 
   rest.get('/notices/progress', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(MOCK_NOTICE_RESPONSE));
+    return res(ctx.status(200), ctx.json(MOCK_NOTICE_RESPONSE), ctx.delay(MOCKING_DELAY));
   }),
 
   rest.get(`/notices`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(MOCK_NOTICE_LIST_RESPONSE));
+    return res(ctx.status(200), ctx.json(MOCK_NOTICE_LIST_RESPONSE), ctx.delay(MOCKING_DELAY));
   }),
 
   rest.get(`/notices/:id`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(MOCK_NOTICE_RESPONSE));
+    return res(ctx.status(200), ctx.json(MOCK_NOTICE_RESPONSE), ctx.delay(MOCKING_DELAY));
   }),
 
   rest.put(`/notices/:id`, async (req, res, ctx) => {

frontend/src/mocks/post.ts

@@ -1,19 +1,20 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_GUEST_POST_INFO, MOCK_POST_INFO } from './mockData/post';
 
 export const mockPost = [
   rest.get('/posts/:postId', (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(200), ctx.json(MOCK_POST_INFO));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(200), ctx.json(MOCK_POST_INFO));
   }),
 
   rest.get('/posts/:postId/guest', (req, res, ctx) => {
-    return res(ctx.delay(1000), ctx.status(200), ctx.json(MOCK_GUEST_POST_INFO));
+    return res(ctx.delay(MOCKING_DELAY), ctx.status(200), ctx.json(MOCK_GUEST_POST_INFO));
   }),
 
   rest.delete('/posts/:postId', (req, res, ctx) => {
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(200),
       ctx.json({ message: '게시글이 성공적으로 삭제되었습니다' })
     );
@@ -23,7 +24,7 @@ export const mockPost = [
     MOCK_POST_INFO.deadline = '2023-07-13 18:40';
 
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(200),
       ctx.json({ message: '게시글이 성공적으로 조기 마감 되었습니다' })
     );
@@ -34,7 +35,7 @@ export const mockPost = [
     window.console.log('게시글 작성 완료', req.body);
 
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(201),
       ctx.json({ message: '게시글이 성공적으로 생성되었습니다' })
     );
@@ -45,7 +46,7 @@ export const mockPost = [
     window.console.log('게시글 수정 완료되었습니다', req.body);
 
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(200),
       ctx.json({ message: '게시글이 성공적으로 수정되었습니다!!' })
     );
@@ -54,7 +55,7 @@ export const mockPost = [
   //게시글 삭제
   rest.delete('/posts/:postId', (req, res, ctx) => {
     return res(
-      ctx.delay(1000),
+      ctx.delay(MOCKING_DELAY),
       ctx.status(200),
       ctx.json({ message: '게시글이 성공적으로 삭제되었습니다!!' })
     );

frontend/src/mocks/postList.ts

@@ -9,6 +9,8 @@ import {
 
 import { MOCK_GUEST_POST_LIST, MOCK_POST_LIST } from '@mocks/mockData/post';
 
+import { MOCKING_DELAY } from './handlers';
+
 export const mockPostList = [
   rest.get('/posts', (req, res, ctx) => {
     return createMockPostListResponse(req, res, ctx);
@@ -58,7 +60,7 @@ const createMockPostListResponse = (
   }
 
   if (page > 0) {
-    return res(ctx.status(200), ctx.json(MOCK_POST_LIST), ctx.delay(1000));
+    return res(ctx.status(200), ctx.json(MOCK_POST_LIST), ctx.delay(MOCKING_DELAY));
   }
 
   return res(ctx.status(200), ctx.json(MOCK_POST_LIST));
@@ -74,7 +76,7 @@ const createMockGuestPostListResponse = (
   if (page === null) return;
 
   if (page > 0) {
-    return res(ctx.status(200), ctx.json(MOCK_GUEST_POST_LIST), ctx.delay(1000));
+    return res(ctx.status(200), ctx.json(MOCK_GUEST_POST_LIST), ctx.delay(MOCKING_DELAY));
   }
 
   return res(ctx.status(200), ctx.json(MOCK_GUEST_POST_LIST));

frontend/src/mocks/ranking.ts

@@ -2,6 +2,8 @@ import { rest } from 'msw';
 
 import { PassionUserRanking, PopularPostRanking } from '@type/ranking';
 
+import { MOCKING_DELAY } from './handlers';
+
 const userRankingInfo: PassionUserRanking = {
   ranking: 1111,
   nickname: 'wow',
@@ -37,14 +39,14 @@ const rankingPostList: PopularPostRanking[] = new Array(10)
 
 export const mockRanking = [
   rest.get('/members/me/ranking', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(500), ctx.json(userRankingInfo));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(userRankingInfo));
   }),
 
   rest.get('/members/ranking/passion/guest', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(1000), ctx.json(rankerList));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(rankerList));
   }),
 
   rest.get('/posts/ranking/popular/guest', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(500), ctx.json(rankingPostList));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(rankingPostList));
   }),
 ];

frontend/src/mocks/report.ts

@@ -1,15 +1,16 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_PENDING_REPORT_LIST } from './mockData/report';
 
 export const mockReport = [
   rest.post('/report', (req, res, ctx) => {
-    return res(ctx.status(200));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY));
   }),
   rest.get('/reports/admin', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(500), ctx.json(MOCK_PENDING_REPORT_LIST));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_PENDING_REPORT_LIST));
   }),
   rest.post('/reports/action/admin', (req, res, ctx) => {
-    return res(ctx.status(200));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY));
   }),
 ];

frontend/src/mocks/reportApproveResult.ts

@@ -1,9 +1,10 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_REPORT_APPROVE_RESULT } from './mockData/reportApproveResult';
 
 export const mockReportApproveResult = [
   rest.get('/alarms/report/:reportId', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.delay(500), ctx.json(MOCK_REPORT_APPROVE_RESULT));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_REPORT_APPROVE_RESULT));
   }),
 ];

frontend/src/mocks/token.ts

@@ -1,9 +1,10 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_TOKEN } from './mockData/token';
 
 export const mockToken = [
   rest.post('/auth/silent-login', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(MOCK_TOKEN));
+    return res(ctx.status(200), ctx.json(MOCK_TOKEN), ctx.delay(MOCKING_DELAY));
   }),
 ];

frontend/src/mocks/userInfo.ts

@@ -2,32 +2,43 @@ import { rest } from 'msw';
 
 import { MOCK_ADMIN_USER_INFO, MOCK_USER_INFO } from '@mocks/mockData/user';
 
+import { MOCKING_DELAY } from './handlers';
+
 export const mockUserInfo = [
   rest.get('/members/me', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(MOCK_ADMIN_USER_INFO));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json(MOCK_ADMIN_USER_INFO));
   }),
 
   rest.patch('/members/me/detail', (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json({ ok: '개인 정보가 성공적으로 저장되었습니다!' }));
+    return res(
+      ctx.status(200),
+      ctx.delay(MOCKING_DELAY),
+      ctx.json({ ok: '개인 정보가 성공적으로 저장되었습니다!' })
+    );
   }),
 
   rest.patch('/members/me/nickname', (req, res, ctx) => {
     MOCK_USER_INFO.nickname = 'wood';
 
-    return res(ctx.status(200), ctx.json({ ok: '닉네임이 성공적으로 수정되었습니다!' }));
+    return res(
+      ctx.status(200),
+      ctx.delay(MOCKING_DELAY),
+      ctx.json({ ok: '닉네임이 성공적으로 수정되었습니다!' })
+    );
   }),
 
   rest.delete('/members/me/delete', (req, res, ctx) => {
     MOCK_USER_INFO.nickname = 'cancel';
 
-    return res(ctx.status(204));
+    return res(ctx.status(204), ctx.delay(MOCKING_DELAY));
   }),
 
   rest.delete('/auth/logout', (req, res, ctx) => {
     const expirationTime = new Date(Date.now() - 1);
 
     return res(
       ctx.status(204),
+      ctx.delay(MOCKING_DELAY),
       ctx.cookie('hasEssentialInfo', 'expired', {
         expires: expirationTime,
       })

frontend/src/mocks/vote.ts

@@ -1,19 +1,20 @@
 import { rest } from 'msw';
 
+import { MOCKING_DELAY } from './handlers';
 import { MOCK_POST_INFO } from './mockData/post';
 
 export const mockVote = [
   //투표
   rest.post('/posts/:postId/options/:optionId', (req, res, ctx) => {
     MOCK_POST_INFO.voteInfo.selectedOptionId = 999;
 
-    return res(ctx.status(200), ctx.json({ message: 'ok' }));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json({ message: 'ok' }));
   }),
 
   //선택지 수정
   rest.patch('/posts/:postId/options', (req, res, ctx) => {
     MOCK_POST_INFO.voteInfo.selectedOptionId = 888;
 
-    return res(ctx.status(200), ctx.json({ message: 'ok' }));
+    return res(ctx.status(200), ctx.delay(MOCKING_DELAY), ctx.json({ message: 'ok' }));
   }),
 ];