msw

Intercept and mock network requests in browser and Node environments.

1|Updated Dec 30, 2025
One-click install
npx skills add https://github.com/Hyperxq/modular-frontend-architecture --skill msw-hyperxq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: msw
Source: https://github.com/Hyperxq/modular-frontend-architecture/tree/main/.claude/skills/msw
Command: npx skills add https://github.com/Hyperxq/modular-frontend-architecture --skill msw-hyperxq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MSW v2 provides a portable, in-browser and Node-based mocking layer to intercept network requests during development and tests, eliminating flaky integration tests and enabling consistent offline workflows.

Core Features & Use Cases

  • Lazy loading via msw/browser for browser environments to initialize mock handlers without SSR issues.
  • Node-side testing with msw/node for deterministic API responses in tests.
  • Per-test override capabilities using server.use() to tailor responses without cross-test leakage.
  • Flexible routing options including passthrough to simulate real network behavior when needed.

Quick Start

Install MSW, initialize the mock service worker in the browser, and run your tests to start using mocks.

Frequently Asked Questions about msw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I mock HTTP requests in both browser and Node test environments?

Mock HTTP requests across browser and Node environments by using a unified service worker layer to intercept network calls, stabilize frontend testing, and simulate backend APIs deterministically. It enables consistent offline workflows during development and CI pipelines.

How to override mocked API responses per test without cross-test leakage?

Override mocked API responses per test without cross-test leakage by applying server.use() to inject specific handlers. The setupServer lifecycle provides resetHandlers to clear custom handlers after each test, ensuring deterministic and isolated test execution.

Does service worker HTTP mocking work with server-side rendering without causing SSR issues?

Service worker HTTP mocking avoids server-side rendering issues by lazy loading the mock worker via msw/browser exclusively for browser environments. For server-side tests, it uses msw/node with setupServer to intercept requests without initializing a browser worker.

Can I simulate real network behavior while mocking HTTP requests?

Simulate real network behavior while mocking HTTP requests by configuring flexible routing options including passthrough. This allows specific network calls to bypass the mock handlers and hit actual backend APIs when needed during development or integration validation.

Why use a service worker for HTTP mocking instead of traditional network mocking libraries?

Using a service worker for HTTP mocking provides a portable in-browser interception layer that standardizes API simulation across development and CI pipelines. Unlike traditional libraries, it eliminates flaky integration tests by intercepting requests at the network level deterministically.

What are the limitations of using service workers for HTTP mocking in Node tests?

Service workers cannot execute in Node tests, requiring msw/node and setupServer to intercept network requests server-side. Browser mock workers must be lazily loaded to avoid SSR issues, and handlers require manual resets using resetHandlers to prevent test state leakage.