feat: apply msw when app is lauched dev mode

#19

Author: timepresent95

App.tsx

@@ -1,11 +1,20 @@
 import {NavigationContainer} from '@react-navigation/native';
 import {QueryClientProvider} from '@tanstack/react-query';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 import queryClient from '@/api/queryClient';
+import {initMSW} from '@/mocks/init';
 import SignUpStackNavigator from '@/navigations/stack/SignUpStackNavigator';
 
 export default function App() {
+  const [isMockingEnabled, setMockingEnabled] = useState(false);
+
+  useEffect(() => {
+    initMSW().then(() => setMockingEnabled(true));
+  }, []);
+
+  if (!isMockingEnabled) return null;
+
   return (
     <QueryClientProvider client={queryClient}>
       <NavigationContainer>

src/mocks/handlers/index.ts

@@ -0,0 +1,37 @@
+import {http, HttpResponse} from 'msw';
+import {Config} from 'react-native-config';
+
+const {BASE_URL: API_BASE_URL} = Config;
+
+const getHandlers = [
+  http.get(API_BASE_URL + '/auth/signout', () => {
+    return HttpResponse.json({});
+  }),
+  http.get(API_BASE_URL + '/question/today', () => {
+    return HttpResponse.json({
+      question: '오늘의 질문 샘플 질문입니다',
+    });
+  }),
+  http.get(API_BASE_URL + '/members', () => {
+    return HttpResponse.json({});
+  }),
+];
+
+const postHandlers = [
+  http.post(API_BASE_URL + '/auth/signup', () => {
+    return HttpResponse.json({
+      token: 'token',
+      name: 'test',
+      role: 'son',
+    });
+  }),
+  http.post(API_BASE_URL + '/auth/signin', () => {
+    return HttpResponse.json({
+      token: 'token',
+      name: 'test',
+      role: 'son',
+    });
+  }),
+];
+
+export const handlers = [...getHandlers, ...postHandlers];

src/mocks/init.ts

@@ -0,0 +1,8 @@
+export async function initMSW() {
+  if (!__DEV__) {
+    return;
+  }
+  await import('./msw.polyfills');
+  const {server} = await import('./server');
+  server.listen();
+}

src/mocks/msw.polyfills.js

@@ -0,0 +1,2 @@
+import 'fast-text-encoding';
+import 'react-native-url-polyfill/auto';

src/mocks/server.ts

@@ -0,0 +1,5 @@
+import {setupServer} from 'msw/native';
+
+import {handlers} from './handlers';
+
+export const server = setupServer(...handlers);

tsconfig.json

@@ -3,8 +3,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
-    }
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "module": "ES2022"
   },
   "target": "ES5"
-}
+}