[feat] msw 설정 (#19)

* chore: msw 설치 및 적용

* style: alias 적용

* chore: msw-storybook-addon 적용

* chore: storybook 설정 추가

* chore: jest msw 설정 추가

.storybook/main.js

@@ -2,7 +2,12 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-addon-next-router',
+  ],
   framework: '@storybook/react',
   core: {
     builder: '@storybook/builder-webpack5',

.storybook/preview.js

@@ -1,14 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { RouterContext } from 'next/dist/shared/lib/router-context';
 import * as NextImage from 'next/image';
 
+import mockApis from '../__mocks__/apis';
 import '../src/styles/reset.css';
 
+initialize();
+
+export const decorators = [
+  mswDecorator,
+  (Story) => (
+    <QueryClientProvider client={new QueryClient()}>
+      <Story />
+    </QueryClientProvider>
+  ),
+];
+
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
+  msw: mockApis,
+  actions: { argTypesRegex: '^on.*' },
+  nextRouter: {
+    Provider: RouterContext.Provider,
   },
 };
 

__mocks__/apis/browser.ts

@@ -0,0 +1,5 @@
+import { SetupWorkerApi, setupWorker } from 'msw';
+
+import mockApis from '.';
+
+export const worker: SetupWorkerApi = setupWorker(...mockApis);

__mocks__/apis/index.ts

@@ -0,0 +1,9 @@
+import { RequestHandler } from 'msw';
+
+import * as sample from './sample';
+
+const mockApis = Object.values({
+  sample,
+}).flatMap((apis: Record<string, RequestHandler>) => Object.values(apis));
+
+export default mockApis;

__mocks__/apis/sample.ts

@@ -0,0 +1,4 @@
+//TODO: api 생성 후 삭제
+import { rest } from 'msw';
+
+export const mockApiSample = rest.post('/test', (req, res, ctx) => res(ctx.json(1)));

__mocks__/apis/server.ts

@@ -0,0 +1,5 @@
+import { SetupServerApi, setupServer } from 'msw/node';
+
+import mockApis from '.';
+
+export const server: SetupServerApi = setupServer(...mockApis);

jest.setup.js

@@ -1,5 +1,11 @@
-// Optional: configure or set up a testing framework before each test.
-// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
-// Used for __tests__/testing-library.js
-// Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+
+import { server } from './__mocks__/apis/server';
+
+/* eslint-disable */
+
+beforeAll(() => server.listen());
+afterEach(() => {
+  server.resetHandlers();
+});
+afterAll(() => server.close());