A comprehensive guide and rule set for implementing Mock Service Worker v2 best practices in JavaScript and TypeScript projects.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install msw-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install msw-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is MSW (Mock Service Worker) v2?
MSW (Mock Service Worker) is a premier tool for API mocking at the network level, allowing you to intercept HTTP and GraphQL requests without modifying application code. This skill focuses exclusively on MSW v2, which brings modern standards to API mocking by removing outdated namespaces and introducing the HttpResponse class. By leveraging Openclaw Skills, developers can stay updated with the latest v2 patterns, ensuring reliable and maintainable test suites for React, Vue, and Node.js applications while avoiding common pitfalls from deprecated v1 signatures.
MSW (Mock Service Worker) v2 Use Cases
- Testing API integrations in frontend and backend environments without a live server.
- Mocking data for Storybook components and local development workflows.
- Transitioning legacy projects from MSW v1 to the more robust v2 API structure.
- Simulating complex response scenarios such as streaming, binary data, and network errors.
- Handling multi-endpoint GraphQL APIs with precise scoping and type safety.
How MSW (Mock Service Worker) v2 Works
- Detect HTTP or GraphQL imports within the codebase to trigger Openclaw Skills guidance.
- Define request handlers using the modern http namespace instead of the deprecated rest namespace.
- Implement async body reading and HttpResponse construction to deliver consistent mock data.
- Configure server lifecycle hooks (beforeAll, afterEach, afterAll) in testing frameworks like Vitest or Jest.
- Utilize advanced utilities like server boundaries to ensure isolation during concurrent test execution.
MSW (Mock Service Worker) v2 Setup
Ensure your project is using MSW version 2.0.0 or higher. Install the package via your preferred package manager:
npm install msw@latest --save-dev
Organize your mocking logic within a src/mocks/ directory, separating your request handlers, browser worker configuration, and Node.js server setup for clean architectural boundaries.
MSW (Mock Service Worker) v2 Data Schema & Taxonomy
| Feature | Implementation Details |
|---|---|
| Namespace | Use http for REST and graphql for GraphQL queries; the rest namespace is removed. |
| Response | Use HttpResponse.json(), HttpResponse.text(), or HttpResponse.error() for all responses. |
| Lifecycle | Managed via server.listen(), server.resetHandlers(), and server.close() for test environments. |
| Resolvers | Signatures now use ({ request, params, cookies }) for modern property access. |
MSW (Mock Service Worker) v2 Advanced Features
- Concurrent test isolation using the
server.boundary()method for parallel execution. - Full support for native Response objects and
Set-Cookieheaders via theHttpResponseclass. - Sophisticated request control using
bypass()for new requests andpassthrough()for actual network access. - Real-time response streaming capabilities for testing Server-Sent Events (SSE) and chunked data.
- Granular GraphQL endpoint mocking using the
graphql.link(url)utility for complex microservices.
SKILL.md
Loading
Related Openclaw Skills
Jest Testing Specialist
A comprehensive guide and rule set for mastering Jest 29+ testing best practices in JavaScript and TypeScript projects.
Tech Docs Framework (Diataxis)
A comprehensive framework for creating enterprise-grade technical documentation using Diataxis and industry-standard style guides.
X Trends Scraper
A CLI-based tool for scraping real-time X (Twitter) trending topics globally without requiring user authentication.
X Trends Scraper
A CLI-based scraper that retrieves real-time X (Twitter) trending topics and tweet volumes across multiple countries without requiring an API key or account.
Redux-Saga Agent Skill
A professional-grade skill for AI agents to build, debug, and optimize complex asynchronous workflows using Redux-Saga generator-based middleware.
Redux-Saga Testing
A specialized skill for writing robust Redux-Saga tests using modern patterns like expectSaga and redux-saga-test-plan.
Featured*
