---
description: Mock API requests for testing and development
---
1. **Install MSW**:
- Mock Service Worker for API mocking.
// turbo
- Run
2. **Initialize MSW**:
- Generate service worker file.
// turbo
- Run
3. **Create Handlers**:
- Define mock API responses.
4. **Setup Browser Worker**:
- Enable mocking in browser.
5. **Start MSW in Development**:
- Create a provider to conditionally start MSW.
- Add to layout:
6. **Use in Tests**:
- Setup for Vitest/Jest.
7. **Pro Tips**:
- Use MSW to develop frontend before backend is ready.
- Override handlers per test for different scenarios.
- MSW works with fetch, axios, and any HTTP client.
- The browser worker only runs in development mode.
description: Mock API requests for testing and development
---
1. **Install MSW**:
- Mock Service Worker for API mocking.
// turbo
- Run
npm install --save-dev msw@latest2. **Initialize MSW**:
- Generate service worker file.
// turbo
- Run
npx msw init public/ --save3. **Create Handlers**:
- Define mock API responses.
// mocks/handlers.ts
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/user', () => {
return HttpResponse.json({
id: '1',
name: 'John Doe',
email: '[email protected]',
});
}),
http.post('/api/login', async ({ request }) => {
const { email } = await request.json() as { email: string };
if (email === '[email protected]') {
return HttpResponse.json({ token: 'fake-jwt-token' });
}
return new HttpResponse(null, { status: 401 });
}),
];4. **Setup Browser Worker**:
- Enable mocking in browser.
// mocks/browser.ts
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);5. **Start MSW in Development**:
- Create a provider to conditionally start MSW.
// app/msw-provider.tsx
'use client'
import { useEffect, useState } from 'react';
export function MSWProvider({ children }: { children: React.ReactNode }) {
const [mswReady, setMswReady] = useState(false);
useEffect(() => {
async function init() {
if (process.env.NODE_ENV === 'development') {
const { worker } = await import('../mocks/browser');
await worker.start({
onUnhandledRequest: 'bypass',
});
setMswReady(true);
} else {
setMswReady(true);
}
}
init();
}, []);
if (!mswReady) return null;
return <>{children}</>;
}- Add to layout:
// app/layout.tsx
import { MSWProvider } from './msw-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<MSWProvider>{children}</MSWProvider>
</body>
</html>
);
}6. **Use in Tests**:
- Setup for Vitest/Jest.
// vitest.setup.ts
import { afterAll, afterEach, beforeAll } from 'vitest';
import { setupServer } from 'msw/node';
import { handlers } from './mocks/handlers';
const server = setupServer(...handlers);
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());7. **Pro Tips**:
- Use MSW to develop frontend before backend is ready.
- Override handlers per test for different scenarios.
- MSW works with fetch, axios, and any HTTP client.
- The browser worker only runs in development mode.
By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
setup-api-mocking-msw-service-worker.md - In Antigravity, type
/setup_api_mocking_msw_service_workeror just describe what you want to do
Related Workflows
Setup Storybook for Components
StorybookComponentsTesting+1
--- description: Build and test components in isolation with Storybook --- 1. **Install Storybook**: - Initialize Storybook in your project. // turbo - Run `npx storybook@latest init` 2. **Create Your First Story**: - Create a story file next to your component. ```tsx // componen...
Setup Sentry Error Tracking
MonitoringSentryErrors+1
--- description: Track and debug production errors with Sentry --- 1. **Install Sentry SDK**: - Install the Next.js SDK. // turbo - Run `npm install @sentry/nextjs` 2. **Initialize Sentry**: - Run the wizard. // turbo - Run `npx @sentry/wizard@latest -i nextjs` - This creates ...
Recommended Rules
View more rules →API Testing (Postman, REST Assured)
APITestingPostman
You are an expert in API Testing using tools like Postman and REST Assured. Key Principles: - Test the business logic layer directly - Faster and mor...
Python Testing Best Practices
PythonTestingQuality Assurance
You are an expert in Python testing with pytest and testing best practices. Key Principles: - Write tests before or alongside code (TDD/BDD) - Aim fo...
Next.js API Routes & Route Handlers Expert
Next.jsAPIRoute Handlers
You are an expert in Next.js API Routes and Route Handlers. Key Principles: - Use Route Handlers in App Router (route.ts) - Implement proper HTTP met...
