Mock Service Worker

https://mswjs.io/docs
Admin
Mock Service Worker (MSW) is an API mocking library for browser and Node.js. It intercepts outgoing...
Tokens:57,822
Snippets:617
Trust Score:9.7
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Add request:start listener to verify setup

Source: https://mswjs.io/docs/runbook

Add this listener to the worker/server instance to log every outgoing request that MSW intercepts. You should see a console message like 'Outgoing: GET https://api.example.com/some/request' for each request. If the request method is different, adjust the handler; if the URL is relative, configure the base URL and test environment.

```js
server.events.on('request:start', ({ request }) => {
  console.log('Outgoing:', request.method, request.url)
})
```

--------------------------------

### Example console output from request:start listener

Source: https://mswjs.io/docs/runbook

Expected console output when the request:start listener is active. It shows the request method and absolute URL for each intercepted request.

```text
Outgoing: GET https://api.example.com/some/request
Outgoing: POST http://localhost/post/abc-123
```

--------------------------------

### Install MSW with pnpm

Source: https://mswjs.io/docs/quick-start

Install MSW as a dev dependency using pnpm.

```sh
pnpm add msw --save-dev
```

--------------------------------

### Enable MSW in Vitest setup file and configure vitest.config.ts

Source: https://mswjs.io/docs/quick-start

Enables MSW in Vitest by calling server.listen() in the test setup file and registering that file in the test.setupFiles array of vitest.config.ts. The setup file must be listed in the test.setupFiles array for the integration to work.

```ts
import { beforeAll, afterEach, afterAll } from 'vitest'
import { server } from './src/mocks/node.js'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())
```

```ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  
setupFiles
: ['./vitest.setup.ts']
})
```

--------------------------------

### Install MSW with npm

Source: https://mswjs.io/docs/quick-start

Install MSW as a dev dependency using npm.

```sh
npm install msw --save-dev
```

--------------------------------

### Migrate ctx.data() to HttpResponse.json()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.data()`: before using `ctx.data`, after using `HttpResponse.json()` with explicit root-level `data` property. The `graphql` handler namespace no longer gets special treatment.

```javascript
graphql.query('GetUser', (req, res, ctx) => {
  return res(
    ctx.data({
      
user
: {
        
firstName
: 'John',
      },
    }),
  )
})
```

```javascript
import { graphql, 
HttpResponse
 } from 'msw'

graphql.query('GetUser', () => {
  return 
HttpResponse
.
json
({
    
data
: {
      
user
: {
        
firstName
: 'John',
      },
    },
  })
})
```

--------------------------------

### Install MSW 3.0

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

Install the latest version of MSW, which includes version 3.0.

```bash
npm install msw@latest
```

--------------------------------

### Dummy fetch call to confirm MSW setup

Source: https://mswjs.io/docs/runbook

If the problematic request is the only request your application makes, add this dummy fetch call after MSW setup to confirm interception. If no message is printed, MSW is not set up correctly.

```js
fetch('https://example.com')
```

--------------------------------

### Migrate ctx.xml() to HttpResponse.xml()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.xml()`: before using `ctx.xml`, after using `HttpResponse.xml()`.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.xml('<foo>bar</foo>'))
})
```

```javascript
import { 
http
, 
HttpResponse
 } from 'msw'


http
.
get
('/resource', () => {
  return 
HttpResponse
.
xml
('<foo>bar</foo>')
})
```

--------------------------------

### Migrate ctx.extensions() to HttpResponse.json()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.extensions()`: before using `ctx.data` and `ctx.extensions`, after using `HttpResponse.json()` with both `data` and `extensions` properties.

```javascript
graphql.query('GetUser', (req, res, ctx) => {
  return res(
    ctx.data({
      
user
: {
        
firstName
: 'John',
      },
    }),
    ctx.extensions({
      
requestId
: 'abc-123',
    }),
  )
})
```

```javascript
import { graphql, 
HttpResponse
 } from 'msw'

graphql.query('GetUser', () => {
  return 
HttpResponse
.
json
({
    
data
: {
      
user
: {
        
firstName
: 'John',
      },
    },
    
extensions
: {
      
requestId
: 'abc-123',
    },
  })
})
```

--------------------------------

### Migrate ctx.text() to HttpResponse

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.text()`: before using `rest.get` with `ctx.text`, after using `http.get` with `HttpResponse` constructor.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.text('Hello world!'))
})
```

```javascript
import { 
http
, 
HttpResponse
 } from 'msw'


http
.
get
('/resource', () => {
  return new 
HttpResponse
('Hello world!')
})
```

--------------------------------

### Handler fallthrough example

Source: https://mswjs.io/docs/defaults

Shows how a request falls through multiple handlers and only the first matching handler handles it. Given a GET /user request, the first handler logs 'One', the second returns a JSON response, and the third is never reached.

```TypeScript
import { http, HttpResponse } from 'msw/http'

export const handlers = [
  http.get('/user', () => console.log('One')),
  http.get('/user', () => HttpResponse.json({ name: 'John' })),
  http.get('/user', () => console.log('Three')),
]

```

--------------------------------

### Install and configure jest-fixed-jsdom

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Install the jest-fixed-jsdom environment and configure it in jest.config.js to restore Node.js globals that jest-environment-jsdom replaces with polyfills, fixing errors like 'Request'/'Response'/'TextEncoder' is not defined.

```sh
npm i jest-fixed-jsdom
```

```js
module.exports = {
  testEnvironment: 'jest-fixed-jsdom',
}
```

--------------------------------

### Install jest-fixed-jsdom

Source: https://mswjs.io/docs/faq

Install the jest-fixed-jsdom package to replace jest-environment-jsdom and restore Node.js globals in Jest tests.

```sh
npm i jest-fixed-jsdom
```

--------------------------------

### Migrate ctx.json() to HttpResponse.json()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.json()`: before using `ctx.json`, after using `HttpResponse.json()`. Note that you don't have to explicitly specify the `Content-Type` response header when using static `HttpResponse` methods like `HttpResponse.json()`.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.json({ 
id
: 'abc-123' }))
})
```

```javascript
import { 
http
, 
HttpResponse
 } from 'msw'


http
.
get
('/resource', () => {
  return 
HttpResponse
.
json
({ 
id
: 'abc-123' })
})
```

--------------------------------

### GraphQL query with variables

Source: https://mswjs.io/docs/graphql/intercepting-operations/variables

The GraphQL query that the example intercepts. It defines a ListUsers query with a required $limit variable and uses it to fetch users.

```graphql
query ListUsers($limit: Int!) {
  users(limit: $limit) {
    id
    name
  }
}
```

--------------------------------

### Migrate ctx.errors() to HttpResponse.json()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.errors()`: before using `ctx.errors`, after using `HttpResponse.json()` with explicit `errors` root-level property.

```javascript
graphql.mutation('Login', (req, res, ctx) => {
  const { username } = req.variables

  return res(
    ctx.errors([
      {
        
message
: `Failed to login:  user "${username}" does not exist`,
      },
    ]),
  )
})
```

```javascript
import { graphql, 
HttpResponse
 } from 'msw'

graphql.mutation('Login', ({ variables }) => {
  const { username } = variables

  return 
HttpResponse
.
json
({
    
errors
: [
      {
        
message
: `Failed to login:  user "${username}" does not exist`,
      },
    ],
  })
})
```

--------------------------------

### Check installed MSW version with npm ls msw

Source: https://mswjs.io/docs/runbook

Run this command to see the installed version of the msw package. Compare it with the latest published version.

```sh
npm ls msw
```

--------------------------------

### Forward server events to WebSocket and broadcast mock data

Source: https://mswjs.io/docs/sse/server-events/establishing-server-connection

By default, all server events are forwarded to the client. This example shows how to inspect incoming server traffic and react to it, e.g., by broadcasting a WebSocket message when a specific event is received.

```typescript
import { ws } from 'msw/ws'
import { sse } from 'msw/sse'

const chat = ws.link('https://api.example.com/chat')

export const handlers = [
  chat.addEventListener('connection', () => {}),

  sse('/stream', ({ server }) => {
    const source = server.connect()

    source.addEventListener('message', (event) => {
      // If the actual server sends a certain event,
      // broadcast mock data on the WebSocket connection.
      if (event.data === 'hello') {
        chat.broadcast('Hello from the server!')
      }
    })
  }),
]
```

--------------------------------

### Mock redirect with http.get and Response

Source: https://mswjs.io/docs/philosophy

Responds with a 302 redirect from the '/old' route to '/new' using the standard Response constructor. This example illustrates MSW's use of platform APIs and the server's perspective when writing request handlers.

```javascript
http
.get
('/old', () => {
  return new 
Response
(null, {
    
status
: 302,
    
headers
: {
      
location
: '/new',
    },
  })
})
```

--------------------------------

### Verify handler and mocked response in MSW

Source: https://mswjs.io/docs/runbook

Example request handler from src/mocks/handlers.js that logs the request method and URL, then returns a mocked JSON response. Use this to verify that the handler is invoked and that the mocked response is constructed correctly.

```javascript
import { 
http
, 
HttpResponse
 } from 'msw/http'

export const 
handlers
 = [
  
http
.
get
('/some/request', ({ 
request
 }) => {
    
console
.
log
('Handler', 
request
.
method
, 
request
.
url
)

    return 
HttpResponse
.
json
({ 
mocked
: true })
  }),
]

```

--------------------------------

### Mirage: Define a REST route with createServer

Source: https://mswjs.io/docs/comparison

Defines a Mirage server with a GET route for /movies that returns a hardcoded array of movie titles. Uses the route-handler format with this.get inside the routes() callback.

```javascript
createServer({
  routes() {
    this.get('/movies', () => {
      return ['Interstellar', 'Inception', 'Dunkirk']
    })
  },
})
```

--------------------------------

### Test that fetches a mocked user with Vitest

Source: https://mswjs.io/docs/quick-start

Example test that fetches a user from https://api.example.com/user and expects the JSON response to equal the mocked user object. Uses the @vitest-environment node directive to run in a Node environment.

```ts
// @vitest-environment node
import { test, expect } from 'vitest'

test('responds with the user', async () => {
  const 
response
 = await 
fetch
('https://api.example.com/user')

  await expect(
response
.
json
()).resolves.toEqual({
    
id
: 'abc-123',
    
firstName
: 'John',
    
lastName
: 'Maverick',
  })
})
```

--------------------------------

### Check latest MSW version with npm view msw version

Source: https://mswjs.io/docs/runbook

Run this command to see the latest published version of the msw package. If it differs from the installed version, upgrade and see if the issue persists.

```sh
npm view msw version
```

--------------------------------

### Exclude multiple clients from broadcast with .broadcastExcept()

Source: https://mswjs.io/docs/websocket/client-events/broadcasting-data

Provide a list of clients as the first argument to `broadcastExcept()` to exclude multiple clients. This example filters the `chat.clients` Set to exclude clients connected to a different room, then broadcasts the message data to the remaining clients.

```ts
import { 
ws
 } from 'msw/ws'

const 
chat
 = 
ws
.
link
('wss://chat.example.com')

export const 
handlers
 = [
  
chat
.
addEventListener
('connection', ({ 
client
 }) => {
    
client
.
addEventListener
('message', (
event
) => {
      // Exclude the clients that connected to a different room.
      const 
otherRooms
 = 
Array
.
from
(
chat
.
clients
).
filter
((
otherClient
) => {
        return 
otherClient
.
url
.
searchParams
.
get
('room') !== 'general'
      })

      
chat
.
broadcastExcept
(
otherRooms
, 
event
.
data
)
    })
  }),
]

```

--------------------------------

### Set up server in src/mocks/node.ts

Source: https://mswjs.io/docs/quick-start

Create a Node.js integration point using setupServer from msw/node. This server can be reused across different tools and environments.

```ts
import { setupServer } from 'msw/node'
import { handlers } from './handlers.js'

export const server = setupServer(...handlers)
```

--------------------------------

### Custom predicate function returning boolean

Source: https://mswjs.io/docs/http/intercepting-requests

Custom predicate function that returns a boolean. The function receives an object with request and cookies, and must return true to match. This example matches GET requests whose query parameters include 'mock'.

```ts
http
.
get
(({ 
request
, 
cookies
 }) => {
  const 
url
 = new 
URL
(
request
.
url
)

  // Match all GET requests whose query params include "mock".
  return 
url
.
searchParams
.
has
('mock')
}, resolver)

```

--------------------------------

### Use makeClient in a test

Source: https://mswjs.io/docs/faq

In a test file, import makeClient and create a new client instance to use in the test.

```js
import { makeClient } from '../src/apollo-client'

it('renders the component', async () => {
  const client = makeClient()
  // ...use your client in test.
})
```

--------------------------------

### Define an optional path parameter

Source: https://mswjs.io/docs/http/intercepting-requests/path-parameters

Shows how to make a path parameter optional by appending a question mark. The type reflects that the value can be nullable. With this handler, both `GET /posts` and `GET /posts/abc-123` match, but `GET /posts/abc-123/edit` does not.

```typescript
http.get<{ id?: string }>('/posts/:id?', ({ params }) => {
  const { id } = params
})
```

--------------------------------

### After: GraphQL link-first mocking

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

After migration, create a GraphQL link via `graphql.link()` and define operation handlers on that link. The link URL can be relative or absolute, and can include wildcards or regular expressions.

```js
import { HttpResponse } from 'msw/http'
import { graphql } from 'msw/graphql'

const api = graphql.link('https://api.example.com/graphql')

export const handlers = [
  api.query('GetUser', () => {
    return HttpResponse.json({
      data: {
        user: { name: 'John' },
      },
    })
  }),
]
```

--------------------------------

### Establish server connection with server.connect()

Source: https://mswjs.io/docs/websocket/server-events/establishing-server-connection

Establishes a WebSocket connection to the actual server by calling server.connect() inside the connection event handler. The connection is bypassed and does not require awaiting.

```ts
const api = ws.link('wss://api.example.com')

export const handlers = [
  api.addEventListener('connection', ({ server }) => {
    server.connect()
  }),
]

```

--------------------------------

### Define a request handler for GET /resource

Source: https://mswjs.io/docs/http/intercepting-requests

Intercepts a GET request to '/resource' and logs the request method and URL to the console. The handler uses the 'request' argument to access request details.

```typescript
http.get('/resource', ({ request }) => {
  console.log(request.method, request.url)
})
```

--------------------------------

### Before: res(ctx.json())

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Old MSW 1.x style using the res() composition function and ctx.json() to mock a JSON response.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.json({ 
id
: 'abc-123' }))
})
```

--------------------------------

### GraphQL query for field error example

Source: https://mswjs.io/docs/graphql/mocking-responses/errors

The query that the field error example responds to. It shows the `user` object with `id` and `name` fields, used to derive the `locations` and `path` in the error.

```graphql
query GetUser {
  user {
    id
    name
  }
}
```

--------------------------------

### MSW: Intercept GET /movies with http.get and Response.json

Source: https://mswjs.io/docs/comparison

MSW handler that intercepts GET /movies and returns a JSON response using the Fetch API's Response.json. Models the interception API after server-side routing.

```javascript
http.get('/movies', () => {
  return Response.json(['Interstellar', 'Inception', 'Dunkirk'])
})
```

--------------------------------

### client.send()

Source: https://mswjs.io/docs/sse/server-events/message-events

Documentation for sending mock message events via client.send() in MSW's SSE API.

```APIDOC
## [SSE] client.send()

### Description
Sends a mock message event to the client. The event data can be any serializable payload, and an optional custom event ID can be provided.

### Method
SSE (Server-Sent Events)

### Endpoint
N/A (client.send() is called within an SSE handler)

### Parameters
#### Request Body
- **data** (any) - Required - The message data to send. Can be a string or any serializable payload (e.g., JSON object).
- **id** (string) - Optional - Custom event ID. Must be a string.
- **event** (string) - Optional - Providing an explicit `event: 'message'` has no effect and is equivalent to not providing the `event` property at all.

### Request Example
```ts
client.send({ data: 'hello world' })
```

### Response
#### Success Response (200)
The client receives a message event with the provided data and optional ID.

#### Response Example
```
data:hello world
```

### Notes
- The event ID must be a string.
- The data can be any serializable payload, including JSON objects.
- TypeScript: You can annotate the data type by providing a type argument to the `sse` function, e.g., `sse<{ message: 'hello world' }>`.
```

--------------------------------

### Before: ctx.body()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Old MSW 1.x style using ctx.body() and ctx.set() to set the response body and content-type header.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.body('Hello world'), ctx.set('content-type', 'text/plain'))
})
```

--------------------------------

### Relative URL predicate with path parameter

Source: https://mswjs.io/docs/http/intercepting-requests

Matches a GET request to a relative URL with a path parameter. The predicate is resolved against the current document's location, so in Node.js tests you must configure the base URL. This handler matches requests like GET http://localhost:3000/users/abc-123 when the app runs at http://localhost:3000.

```ts
http
.
get
('/users/:id', () => {})

```

--------------------------------

### Enable mocking with virtual:msw network

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

Enable mocking in a Vite application using the preconfigured 'network' instance from 'virtual:msw'. Import handlers and configure the network, then enable it.

```javascript
if (import.meta.env.DEV) {
  const { network } = await import('virtual:msw')
  const { handlers } = await import('./mocks/handlers')

  network.configure({ handlers })
  await network.enable()
}
```

--------------------------------

### Before: Imports from 'msw' root

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

Before migration, all request and event handlers and utility functions were imported from the root of the 'msw' package.

```js
import {
  http,
  HttpResponse,
  graphql,
  ws,
  sse,
  delay,
  bypass,
  passthrough,
} from 'msw'
```

--------------------------------

### Link-first mocking with graphql.link()

Source: https://mswjs.io/docs/graphql/intercepting-operations

Create GraphQL links to endpoints and define handlers for operations against those endpoints. The same operation name can be handled differently based on the endpoint URL.

```ts
import { 
graphql
 } from 'msw/graphql'

const 
github
 = 
graphql
.
link
('https://api.github.com/graphql')
const 
stripe
 = 
graphql
.
link
('https://api.stripe.com/graphql')

export const 
handlers
 = [
  
github
.
query
('GetUser', oneResolver),
  
stripe
.
query
('GetUser', anotherResolver),
]
```

--------------------------------

### After: new Response()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

New MSW 2.x style using the Fetch API Response instance with JSON.stringify and a content-type header.

```javascript
import { 
http
 } from 'msw'


http
.
get
('/resource', () => {
  return new 
Response
(
JSON
.
stringify
({ 
id
: 'abc-123' }), {
    
headers
: {
      'content-type': 'application/json',
    },
  })
})
```

--------------------------------

### Import graphql namespace from msw/graphql

Source: https://mswjs.io/docs/graphql

Import the graphql namespace from the msw/graphql module to mock GraphQL APIs.

```ts
import { 
graphql
 } from 'msw/graphql'

```

--------------------------------

### Read request cookies

Source: https://mswjs.io/docs/http/intercepting-requests/cookies

Shows how to access the cookies object in the response resolver to read request cookies, with an example of checking for an auth token.

```APIDOC
## Read request cookies

### Description
Access the request's cookies via the `cookies` object provided in the response resolver argument. This object parses request cookies for convenience, as opposed to manually reading the `Cookie` header.

### Method
GET

### Endpoint
/api/user

### Parameters
#### Request Cookies
- **authToken** (string) - Optional - The authentication token cookie. If missing, the request is rejected with a 403 status.

### Request Example
```ts
http.get('/api/user', ({ cookies }) => {
  if (!cookies.authToken) {
    return new HttpResponse(null, { status: 403 })
  }

  return HttpResponse.json({ name: 'John' })
})
```

### Response
#### Success Response (200)
- **name** (string) - The user's name.

#### Response Example
```json
{
  "name": "John"
}
```

#### Error Response (403)
- Returns an empty response body with status 403 when the `authToken` cookie is missing.
```

--------------------------------

### Before: GraphQL query handler

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

Before migration, GraphQL mocking used the `graphql.query()` method directly from the `graphql` namespace.

```js
import { graphql, HttpResponse } from 'msw'

export const handlers = [
  graphql.query('GetUser', () => {
    return HttpResponse.json({
      data: {
        user: { name: 'John' },
      },
    })
  }),
]
```

--------------------------------

### Define request handlers in src/mocks/handlers.ts

Source: https://mswjs.io/docs/quick-start

Create a request handler for a GET request to https://api.example.com/user. The handler returns a JSON response with user data.

```ts
import { http, HttpResponse } from 'msw/http'

export const handlers = [
  http.get('https://api.example.com/user', () => {
    return HttpResponse.json({
      id: 'abc-123',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]
```

--------------------------------

### Mock Socket.IO with @mswjs/socket.io-binding

Source: https://mswjs.io/docs/websocket/bindings

Shows how to mock Socket.IO communication using MSW's WebSocket link and the @mswjs/socket.io-binding. The binding wraps the connection to provide a Socket.IO-like API (io.client.on/emit). Note that bindings do not cover all public APIs of the third-party library.

```javascript
import { 
ws
 } from 'msw/ws'
import { toSocketIo } from '@mswjs/socket.io-binding'

const 
chat
 = 
ws
.
link
('wss://chat.example.com')

export const 
handlers
 = [
  
chat
.
addEventListener
('connection', (
connection
) => {
    const io = toSocketIo(
connection
)

    io.client.on('hello', (username) => {
      io.client.emit('message', `hello, ${username}!`)
    })
  }),
]
```

--------------------------------

### Regular expression predicate

Source: https://mswjs.io/docs/http/intercepting-requests

Matches a GET request using a regular expression predicate. Useful for complex matching scenarios where path/URL predicates are insufficient.

```ts
http
.
get
(/\/settings\/(profile|settings)/, () => {})

```

--------------------------------

### Nock: Intercept request with method chaining

Source: https://mswjs.io/docs/comparison

Uses method chaining to intercept a GET request and reply with a mocked response. This is the Nock approach to defining mocks.

```js
nock('https://api.example.com').get('/user').reply(200, { 
id
: 1, 
name
: 'John' })
```

--------------------------------

### Create a WebSocket link with ws.link()

Source: https://mswjs.io/docs/websocket

Create a WebSocket link by calling `ws.link()` with a URL predicate. The predicate supports absolute and relative URLs, path parameters, wildcards, and regular expressions.

```ts
import { 
ws
 } from 'msw/ws'

const 
chat
 = 
ws
.
link
('wss://chat.example.com')
```

--------------------------------

### Set response headers with HttpResponse.json

Source: https://mswjs.io/docs/http/mocking-responses

Set response headers by passing a headers object as the second argument to HttpResponse.json. This example overrides the content-type header to application/hal+json.

```ts
http.get('/resource', () => {
  return HttpResponse.json(
    { id: 'abc-123' },
    {
      headers: {
        'content-type': 'application/hal+json',
      },
    },
  )
})
```

--------------------------------

### Set a status code with HttpResponse

Source: https://mswjs.io/docs/http/mocking-responses

Set a custom status code by passing a status option to the HttpResponse constructor. This example returns a 404 Not Found response.

```ts
http.get('/resource', () => {
  return new HttpResponse(null, { status: 404 })
})
```

--------------------------------

### After: server.events.on('websocket:connection')

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

After the migration, the event is renamed to 'websocket:connection'.

```javascript
server.events.on('websocket:connection', listener)
```

--------------------------------

### Before: ctx.set()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Old MSW 1.x style using ctx.set() to set a custom response header.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.set('x-custom-header', 'foo'))
})
```

--------------------------------

### Named GraphQL operation example

Source: https://mswjs.io/docs/graphql/intercepting-operations

A GraphQL query named GetUser that can be handled with a handler like api.query('GetUser', resolver). Named operations are recommended for easier interception.

```graphql
# The following GraphQL query can be handled
# with a handler that looks like this:
#
# api.query('GetUser', resolver)
query GetUser {
  user {
    id
  }
}
```

--------------------------------

### Exclude a client from broadcast with .broadcastExcept()

Source: https://mswjs.io/docs/websocket/client-events/broadcasting-data

Use the `broadcastExcept()` method to exclude a specific client from the broadcast. This example excludes the client that sent the message, broadcasting the message data to all other connected clients.

```ts
import { 
ws
 } from 'msw/ws'

const 
chat
 = 
ws
.
link
('wss://chat.example.com')

export const 
handlers
 = [
  
chat
.
addEventListener
('connection', ({ 
client
 }) => {
    
client
.
addEventListener
('message', (
event
) => {
      // Whenever this client sends a message,
      // broadcast it to all other clients.
      
chat
.
broadcastExcept
(
client
, 
event
.
data
)
    })
  }),
]

```

--------------------------------

### Worker imports before migration

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Before MSW 2.0, setupWorker was imported from 'msw'. This is the old import statement.

```javascript
import { setupWorker } from 'msw'
```

--------------------------------

### Worker imports after migration

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

After MSW 2.0, setupWorker is imported from 'msw/browser'. This is the new import statement.

```javascript
import { 
setupWorker
 } from 'msw/browser'
```

--------------------------------

### Migrate ctx.delay() to delay()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Migration example for `ctx.delay()`: before using `ctx.delay`, after using the exported `delay()` function that returns a timeout `Promise`. The call signature of `delay()` remains identical to the previous `ctx.delay()`.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.delay(500), ctx.text('Hello world'))
})
```

```javascript
import { 
http
, 
HttpResponse
, 
delay
 } from 'msw'


http
.
get
('/resource', async () => {
  await 
delay
(500)
  return 
HttpResponse
.
text
('Hello world')
})
```

--------------------------------

### Before: ctx.cookie()

Source: https://mswjs.io/docs/migrations/1.x-to-2.x

Old MSW 1.x style using ctx.cookie() to set a response cookie.

```javascript
rest.get('/resource', (req, res, ctx) => {
  return res(ctx.cookie('token', 'abc-123'))
})
```

--------------------------------

### GraphQL subscription mocking with .subscription()

Source: https://mswjs.io/docs/migrations/2.x-to-3.x

New API for mocking GraphQL subscriptions using the .subscription() method on a GraphQL link.

```javascript
import { graphql } from 'msw/graphql'

const api = graphql.link('https://api.example.com/graphql')

export const handlers = [
  api.subscription('OnCreateMessage', ({ subscription }) => {
    subscription.publish({
      data: {
        messageCreated: {
          content: 'Welcome, subscriptions!',
        },
      },
    })
  }),
]
```

--------------------------------

### Import ws namespace from msw/ws

Source: https://mswjs.io/docs/websocket

Import the `ws` namespace from the `msw/ws` module to access WebSocket mocking utilities.

```ts
import { 
ws
 } from 'msw/ws'
```

--------------------------------

### Mock redirect response with HttpResponse

Source: https://mswjs.io/docs/http/mocking-responses/redirects

Return a redirect Response from the response resolver by setting status 301 and the location header to '/destination'. The GET /target request will be redirected to /destination, which is unhandled unless you define a handler for it.

```typescript
http.get('/target', () => {
  return new HttpResponse(null, {
    status: 301,
    headers: {
      location: '/destination',
    },
  })
})
```

--------------------------------

### Broadcast data to all WebSocket clients with .broadcast()

Source: https://mswjs.io/docs/websocket/client-events/broadcasting-data

Use the `.broadcast()` method on a WebSocket link to send the same data to all intercepted WebSocket clients. This example broadcasts a message to every client that connects to the `wss://chat.example.com` link.

```ts
import { 
ws
 } from 'msw/ws'

const 
chat
 = 
ws
.
link
('wss://chat.example.com')

export const 
handlers
 = [
  
chat
.
addEventListener
('connection', () => {
    
chat
.
broadcast
('Hello, everyone!')
  }),
]

```

--------------------------------

### WebSocket Server Event: `open`

Source: https://mswjs.io/docs/websocket/server-events

The `open` event is dispatched when the server connection has been established. Listen to it to handle the successful opening of the WebSocket connection.

```APIDOC
## WebSocket Server Event: `open`

### Description
Dispatched when the server connection has been established. Listen to this event to react to the successful opening of the WebSocket connection.

### Event Name
`open`

### Usage
Add an event listener to the `server` object after establishing the connection with `server.connect()`.

### Example
```ts
const api = ws.link('wss://api.example.com')

api.addEventListener('connection', ({ server }) => {
  server.connect()
  server.addEventListener('open', (event) => {
    console.log('Server connection opened', event)
  })
})
```
```

--------------------------------

### Access variables in response resolver

Source: https://mswjs.io/docs/graphql/intercepting-operations/variables

Use the variables property of the response resolver's argument to read the variables passed with the intercepted GraphQL operation. In this example, it logs the variables object, which contains { limit: 10 }.

```ts
const api = graphql.link('https://api.example.com/graphql')

api.query('ListUsers', ({ variables }) => {
  console.log(variables) // { limit: 10 }
})
```

--------------------------------

### Define a simple path parameter with type

Source: https://mswjs.io/docs/http/intercepting-requests/path-parameters

Shows how to define a path parameter by including a colon and parameter name in the request path. The type argument describes the parameter types, and the parameter position is marked in the path.

```typescript
http.get<{ id: string }>('/posts/:id', () => {})
```
Tokens:
Raw