[Feature] - msw 설정

frontend/.prettierrc.json

@@ -16,6 +16,7 @@
     "<THIRD_PARTY_MODULES>",
     "^@tanstack/(.*)$",
     "^@apis/(.*)$",
+    "^@mocks/(.*)$",
     "^@components/(.*)$",
     "^@hooks/(.*)$",
     "^@constants/(.*)$",

frontend/.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import path from "path";
+import webpack from "webpack";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -21,6 +22,7 @@ const config: StorybookConfig = {
         "@assets": path.resolve(__dirname, "../src/assets"),
         "@styles": path.resolve(__dirname, "../src/styles"),
         "@apis": path.resolve(__dirname, "../src/apis"),
+        "@mocks": path.resolve(__dirname, "../src/mocks"),
       };
     }
     config.module = config.module || {};
@@ -33,6 +35,13 @@ const config: StorybookConfig = {
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
+    config.plugins = config.plugins || [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        "process.env": JSON.stringify(process.env),
+      }),
+    );
+
     return config;
   },
   swc: () => ({
@@ -44,5 +53,6 @@ const config: StorybookConfig = {
       },
     },
   }),
+  staticDirs: ["../public"],
 };
 export default config;

frontend/.storybook/preview.tsx

@@ -3,12 +3,23 @@ import React from "react";
 import { Global, ThemeProvider } from "@emotion/react";
 
 import type { Preview } from "@storybook/react";
+import { initialize, mswLoader } from "msw-storybook-addon";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+import { handlers } from "../src/mocks/handlers";
 import { globalStyle } from "../src/styles/globalStyle";
 import theme from "../src/styles/theme";
 
+initialize(
+  {
+    serviceWorker: {
+      url: "/mockServiceWorker.js",
+    },
+  },
+  handlers,
+);
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -31,6 +42,7 @@ const preview: Preview = {
       );
     },
   ],
+  loaders: [mswLoader],
 };
 
 export default preview;

frontend/jest-setup.ts

@@ -0,0 +1,7 @@
+import { server } from "@mocks/server";
+
+beforeAll(() => server.listen());
+
+afterEach(() => server.resetHandlers());
+
+afterAll(() => server.close());

frontend/jest.config.js

@@ -9,6 +9,15 @@ module.exports = {
     "^@assets/(.*)$": "<rootDir>/src/assets/$1",
     "^@constants/(.*)$": "<rootDir>/src/constants/$1",
     "^@apis/(.*)$": "<rootDir>/src/apis/$1",
+    "^@mocks/(.*)$": "<rootDir>/src/mocks/$1",
   },
   testPathIgnorePatterns: ["<rootDir>/__tests__/constants/", "<rootDir>/__tests__/utils/"],
+  /* 
+    msw v2를 사용 시 별도의 polyfills 설정이 필요함
+    (https://mswjs.io/docs/migrations/1.x-to-2.x/#frequent-issues)
+  */
+  setupFiles: ["./jest.polyfills.js"],
+  testEnvironmentOptions: {
+    customExportConditions: [""],
+  },
 };

frontend/jest.polyfills.js

@@ -0,0 +1,22 @@
+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/package.json

@@ -54,6 +54,8 @@
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "msw": "^2.3.2",
+    "msw-storybook-addon": "^2.0.3",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.2",
     "storybook": "^8.2.4",
@@ -63,6 +65,7 @@
     "ts-jest": "^29.2.2",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.3",
+    "undici": "^6.19.2",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
@@ -98,5 +101,10 @@
   "browserslist": [
     ">5%",
     "not dead"
-  ]
+  ],
+  "msw": {
+    "workerDirectory": [
+      "./public"
+    ]
+  }
 }