test: storybook 버전 업그레이드 및 msw 적용

woowacourse-teams · Sep 28, 2023 · 893d32e · 893d32e
1 parent 779f1fd
commit 893d32e
Show file tree

Hide file tree

Showing 3 changed files with 2,717 additions and 3,369 deletions.
diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx
@@ -1,13 +1,17 @@
 import type { Preview } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { AuthProvider } from '../src/context/AuthContext';
+import handlers from '../src/mocks/handlers';
 import GlobalStyle from '../src/styles/GlobalStyle';
 import ResetStyle from '../src/styles/ResetStyle';
 import theme from '../src/styles/theme';
 
+initialize();
+
 const customViewports = {
   Default: {
     name: 'Default',
@@ -39,9 +43,13 @@ const preview: Preview = {
       viewports: { ...customViewports },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers,
+    },
   },
 
   decorators: [
+    mswDecorator,
     (Story) => (
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
@@ -56,6 +64,8 @@ const preview: Preview = {
       </QueryClientProvider>
     ),
   ],
+
+  loaders: [mswLoader],
 };
 
 export default preview;
diff --git a/client/package.json b/client/package.json
@@ -32,14 +32,14 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@storybook/addon-essentials": "7.0.25",
-    "@storybook/addon-interactions": "7.0.25",
-    "@storybook/addon-links": "7.0.25",
-    "@storybook/addon-styling": "^1.3.4",
-    "@storybook/blocks": "7.0.25",
-    "@storybook/react": "^7.0.25",
-    "@storybook/react-webpack5": "7.0.25",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "0.2.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -59,15 +59,16 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.14",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
     "msw": "^1.2.2",
+    "msw-storybook-addon": "^1.8.0",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-refresh": "^0.14.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.25",
+    "storybook": "^7.4.5",
     "stylelint": "^15.9.0",
     "stylelint-config-clean-order": "^5.0.1",
     "stylelint-no-unsupported-browser-features": "^7.0.0",