테스트 환경에서 msw 모킹을 위한 세팅

frontend/.storybook/main.ts

@@ -45,6 +45,7 @@ const config: StorybookConfig = {
         '@_types': path.resolve(__dirname, '../src/types'),
         '@_utils': path.resolve(__dirname, '../src/utils'),
         '@_routes': path.resolve(__dirname, 'src/routes'),
+        '@_mocks': path.resolve(__dirname, 'src/mocks'),
       };
     }
 

frontend/jest.config.json

@@ -0,0 +1,25 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "jest-environment-jsdom",
+
+
+
+  "moduleNameMapper": {
+    "^@_apis/(.*)$": "<rootDir>/src/apis/$1",
+    "^@_constants/(.*)$": "<rootDir>/src/constants/$1",
+    "^@_common/(.*)$": "<rootDir>/src/common/$1",
+    "^@_components/(.*)$": "<rootDir>/src/components/$1",
+    "^@_hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^@_layouts/(.*)$": "<rootDir>/src/layouts/$1",
+    "^@_pages/(.*)$": "<rootDir>/src/pages/$1",
+    "^@_types/(.*)$": "<rootDir>/src/types/$1",
+    "^@_utils/(.*)$": "<rootDir>/src/utils/$1",
+    "^@_routes/(.*)$": "<rootDir>/src/routes/$1",
+    "^@_mocks/(.*)$": "<rootDir>/src/mocks/$1"
+  },
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
+  "setupFiles": ["dotenv/config", "./jest.polyfills.js"],
+  "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
+}

frontend/jest.polyfills.js

@@ -0,0 +1,32 @@
+/**
+ * @note The block below contains polyfills for Node.js globals
+ * required for Jest to function when running JSDOM tests.
+ * These HAVE to be require's and HAVE to be in this exact
+ * order, since "undici" depends on the "TextEncoder" global API.
+ *
+ * Consider migrating to a more modern test runner if
+ * you don't want to deal with this.
+ */
+
+const { TextDecoder, TextEncoder } = require('node:util');
+const { ReadableStream, TransformStream } = require('node:stream/web');
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+  ReadableStream: { value: ReadableStream },
+  TransformStream: { value: TransformStream },
+});
+
+const { Blob, File } = require('node:buffer');
+const { fetch, Headers, FormData, Request, Response } = require('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 },
+});

frontend/jest.setup.ts

@@ -0,0 +1,21 @@
+import { server } from './src/mocks/server';
+import '@testing-library/jest-dom';
+import dotenv from 'dotenv';
+dotenv.config({ path: './.env' });
+
+beforeAll(() => {
+  console.log('befor all server listen');
+  server.listen({
+    onUnhandledRequest: 'error', // 이 옵션을 통해 핸들되지 않은 요청을 경고로 표시
+  });
+});
+
+afterEach(() => {
+  console.log('after each server reset handlers ');
+  server.resetHandlers();
+});
+// Clean up after the tests are finished.
+afterAll(() => {
+  console.log('after all  server closed');
+  server.close();
+});

frontend/package.json

@@ -14,7 +14,6 @@
     "lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:style": "stylelint **/*.style.ts --fix",
     "lint": "npm run lint:eslint && npm run lint:style"
-
   },
   "repository": {
     "type": "git",
@@ -75,6 +74,7 @@
     "ts-node": "^10.9.2",
     "type-fest": "^4.21.0",
     "typescript": "^5.5.3",
+    "undici": "^6.19.5",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

frontend/src/hooks/queries/useMoims.ts

@@ -8,7 +8,6 @@ export default function useMoims() {
     queryKey: [QUERY_KEYS.moims],
     queryFn: getMoims,
   });
-
   // TODO:서버에서 검증하면 없애야 함
   const filteredMoims = useMemo(
     () =>
@@ -19,6 +18,5 @@ export default function useMoims() {
       }),
     [moims],
   );
-
   return { moims: filteredMoims, isLoading };
 }

frontend/src/mocks/browser.ts

@@ -1,6 +1,10 @@
 import { setupWorker } from 'msw/browser';
-import { moimHandler } from './handlers/moimHandler';
-import { interestHandler } from './handlers/interestHandler';
-import { pleaseHandler } from './handlers/pleaseHandler';
+import { moimHandler } from './handler/moimHandler';
+import { interestHandler } from './handler/interestHandler';
+import { pleaseHandler } from './handler/pleaseHandler';
 
-export const worker = setupWorker(...moimHandler, ...interestHandler, ...pleaseHandler);
+export const worker = setupWorker(
+  ...moimHandler,
+  ...interestHandler,
+  ...pleaseHandler,
+);

frontend/src/mocks/handler/index.ts

@@ -0,0 +1,3 @@
+import { moimHandler } from './moimHandler';
+
+export const handlers = [...moimHandler];

frontend/src/mocks/handlers/moimHandler.ts → frontend/src/mocks/handler/moimHandler.ts

@@ -1,8 +1,8 @@
 import { http, HttpResponse } from 'msw';
 import ENDPOINTS from '@_apis/endPoints';
-
 export const moimHandler = [
   http.get(`${ENDPOINTS.moims}`, () => {
+    console.log('msw중');
     return HttpResponse.json({
       data: {
         moims: [
@@ -16,6 +16,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 2,
@@ -27,6 +31,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 3,
@@ -38,6 +46,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 4,
@@ -49,6 +61,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 5,
@@ -60,6 +76,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 6,
@@ -71,6 +91,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 7,
@@ -82,6 +106,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 8,
@@ -93,6 +121,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
           {
             moimId: 9,
@@ -104,6 +136,10 @@ export const moimHandler = [
             maxPeople: 2,
             authorNickname: '2',
             description: '',
+            status: 'MOIMING',
+            participants: [],
+            comments: [],
+            isZzimed: false,
           },
         ],
       },

frontend/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handler/index';
+
+export const server = setupServer(...handlers);

frontend/src/mocks/wrapper.tsx

@@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      networkMode: 'always',
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default wrapper;

frontend/tsconfig.json

@@ -30,7 +30,8 @@
       "@_pages/*": ["src/pages/*"],
       "@_types/*": ["src/types/*"],
       "@_utils/*": ["src/utils/*"],
-      "@_routes/*": ["src/routes/*"]
+      "@_routes/*": ["src/routes/*"],
+      "@_mocks/*": ["src/mocks/*"]
     }
   },
   "ts-node": {

frontend/webpack.common.js

@@ -39,6 +39,7 @@ module.exports = {
       '@_types': path.resolve(__dirname, 'src/types'),
       '@_utils': path.resolve(__dirname, 'src/utils'),
       '@_routes': path.resolve(__dirname, 'src/routes'),
+      '@_mocks': path.resolve(__dirname, 'src/mocks'),
     },
   },
   module: {