DOCSEARCHbyAlgolia
Submit Docs

Mock Service Worker

website·Indexed 39 days ago

https://mswjs.io/docs

An API mocking library for browser and Node.js that allows developers to intercept outgoing requests, observe them, and mock responses. It provides first-class support for HTTP, GraphQL, Server-Sent Events, and WebSockets, with specialized setup functions like setupServer for Node.js and setupWorker for the browser.

Tokens
89.6K
Snippets
522
Records
638
Agent score
72%

What's inside MSW

  1. Overview of MSW Data

    Data is a data modeling and relation library specifically designed for testing JavaScript applications. It allows developers to define data models and relationships to simulate a backend database environment during testing.

  2. Overview of Mock Service Worker (MSW)

    Mock Service Worker (MSW) is an API mocking library for browser and Node.js that allows developers to intercept outgoing requests, observe them, and respond using mocked responses. Unlike traditional mocking libraries that patch the fetch function, MSW implements a standalone API mocking layer that serves as a single source of truth for network behavior across different tools and environments.

  3. Overview of MSW Source

    Source is an open-source library designed to work alongside Mock Service Worker (MSW). It allows developers to generate MSW request handlers automatically from a source of truth (such as an API specification or network recording) instead of writing them manually. It operates as a runtime tool, transforming inputs into request handlers on-the-fly in memory to avoid the maintenance overhead of build-time artifacts.

  4. Overview of Mock Service Worker (MSW)

    Mock Service Worker (MSW) is an API mocking library for browser and Node.js that allows developers to intercept outgoing requests, observe them, and respond using mocked responses. It advocates for a standalone API mocking layer to create a single source of truth for network behavior across different tools and environments.

  5. Overview of Mock Service Worker (MSW)

    Mock Service Worker (MSW) is an API mocking library for JavaScript. It enables developers to write client-agnostic mocks that can be reused across different frameworks, tools, and environments, ensuring consistent API mocking regardless of the specific client or test runner being used.

  6. Overview of Mock Service Worker (MSW)

    Mock Service Worker (MSW) is an API mocking library for browser and Node.js environments. It allows developers to intercept outgoing network requests, observe them, and respond with mocked data. Unlike libraries that patch the fetch API, MSW advocates for a standalone API mocking layer that serves as a single source of truth for network behavior across development, integration testing, end-to-end testing, and tools like Storybook.

  7. Understand MSW default network passthrough behavior

    MSW employs a 'network-first' approach for standard network requests, meaning it will not interfere with the network unless a handler is explicitly defined to intercept and handle the request. However, WebSockets are 'mock-first' due to specification limitations.

  8. Monitor MSW life-cycle events

    MSW exposes a read-only events property on the worker or server instance. This API allows you to observe requests and responses but cannot be used to modify them. It is useful for building third-party libraries, monitoring application traffic, or explicitly waiting for specific network events. The API is identical for both browser (setupWorker) and Node.js (setupServer) environments.
    // In the browser
const worker = setupWorker(...handlers)
worker.events

// In Node.js
const server = setupServer(...handlers)
server.events

  9. Implement request handlers from a server's perspective

    When writing request handlers in MSW, you should approach them from the server's perspective. Instead of thinking about how to 'fake' a function call, you are describing how a remote server should behave in a particular scenario when it receives a specific request.

  10. Intercept and mock HTTP requests using the msw http namespace

    Mock Service Worker (MSW) provides an http namespace to intercept and mock HTTP requests. MSW is built on web standards, meaning it uses the Fetch API to handle intercepted requests and construct mocked responses, regardless of whether the original request was made using fetch() or another client.
    import { http } from 'msw'

  11. Intercept HTTP requests using the http namespace

    The http namespace is used to create request handlers that intercept outgoing HTTP requests. It provides methods corresponding to standard HTTP verbs (GET, POST, etc.) to describe resource operations in REST APIs. Each handler takes a predicate (string or RegExp) to match the request, a resolver function to handle the request and return a response, and optional configuration options.
    http.get<PathParams, RequestBodyType, ResponseBodyType>(
  predicate: string | RegExp,
  resolver: ResponseResolver<HttpRequestResolverExtras<Params>, RequestBodyType, ResponseBodyType>,
  options?: RequestHandlerOptions
)

  12. Implement request handlers from a server perspective

    When writing request handlers in MSW, you should adopt the 'server's perspective'. Rather than thinking about the client's needs, you are describing how the server should behave in a specific scenario to produce the desired network response.