Setup MSW for API mocking during development and testing

.env.sample

@@ -1 +1,2 @@
 NEXT_PUBLIC_BACKEND_API_URL="http://localhost:8000" 
+NEXT_PUBLIC_API_MOCKING=true

__mocks__/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser'
+import { handlers } from './handlers/index'
+
+export const worker = setupWorker(...handlers)

__mocks__/handlers/index.ts

@@ -0,0 +1 @@
+export const handlers = []

__mocks__/init.ts

@@ -0,0 +1,33 @@
+import { appConfig } from '@/config/app-config'
+
+export async function enableMocking() {
+  if (appConfig.isDev && !appConfig.isMockingEnabled) {
+    console.log(`MSW mocking disabled: ${appConfig.isDev}, ${appConfig.isMockingEnabled} `)
+    return
+  }
+  try {
+    if (typeof window === 'undefined') {
+      const { server } = await import('./server')
+      server.listen({
+        onUnhandledRequest: (req, print) => {
+          if (req.url.includes('_next')) {
+            return
+          }
+          print.warning()
+        },
+      })
+    } else {
+      const { worker } = await import('./browser')
+      await worker.start({
+        onUnhandledRequest: (req, print) => {
+          if (req.url.includes('_next')) {
+            return
+          }
+          print.warning()
+        },
+      })
+    }
+  } catch (error) {
+    console.log('Failed to start MSW server: ', error)
+  }
+}

__mocks__/server.ts

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

app/layout.tsx

@@ -3,6 +3,9 @@ import { appConfig, validateAppConfig } from '@/config/app-config'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { enableMocking } from '@/__mocks__/init'
+
+enableMocking()
 
 const inter = Inter({
   subsets: ['latin'],

components/msw-provider.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function MockServiceWorkerProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    import('@/__mocks__/init').then(({ enableMocking }) => {
+      enableMocking()
+    })
+  }, [])
+
+  return <>{children}</>
+}

components/providers.tsx

@@ -2,6 +2,7 @@
 
 // Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
 import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MockServiceWorkerProvider } from './msw-provider'
 
 function makeQueryClient() {
   return new QueryClient({
@@ -39,5 +40,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   //       render if it suspends and there is no boundary
   const queryClient = getQueryClient()
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  return (
+    <MockServiceWorkerProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </MockServiceWorkerProvider>
+  )
 }

config/app-config.ts

@@ -4,6 +4,8 @@ const appConfigSchema = z.object({
   appName: z.string().min(1, { error: 'App name is required.' }),
   appDescription: z.string().min(1, { error: 'App description is required' }),
   backendBaseUrl: z.string().min(1, { error: 'Backend base URL is required' }),
+  isDev: z.boolean(),
+  isMockingEnabled: z.boolean(),
 })
 
 type TAppConfig = z.infer<typeof appConfigSchema>
@@ -12,6 +14,8 @@ export const appConfig: TAppConfig = {
   appName: 'Stride',
   appDescription: 'An effective todo management systems for your teams.',
   backendBaseUrl: process.env.NEXT_PUBLIC_BACKEND_API_URL || '',
+  isDev: process.env.NODE_ENV === 'development',
+  isMockingEnabled: process.env.NEXT_PUBLIC_API_MOCKING === 'true',
 }
 
 export const validateAppConfig = (config: TAppConfig) => {

package.json

@@ -78,6 +78,7 @@
     "eslint-plugin-storybook": "9.0.16",
     "jsdom": "26.1.0",
     "local-ssl-proxy": "2.0.5",
+    "msw": "2.10.4",
     "npm-run-all": "4.1.5",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
@@ -93,5 +94,10 @@
   "volta": {
     "node": "22.13.0",
     "pnpm": "9.15.0"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }