mswx

English｜繁體中文

The package is extension to msw(Mock Service Worker).

Currently, provide the following features:

• API_PREFIX
• Define
• Middleware

Install

$ npm i mswx

API_PREFIX

Set API prefix, default is http://localhost:5173, if you want to disable it, can set empty string to it.

1rest.config.API_PREFIX = 'http://localhost:5173'

Define

A syntactic sugar to define the endpoint, as the below example equals.

1  rest.get('/url', (_, res, ctx) => {
2    return res(ctx.status(200))
3  })
4  // and
5  rest.define('get', '/url', (_, res, ctx) => {
6    return res(ctx.status(200))
7  })
8  // or
9  rest.define({
10    method: 'get',
11    path: '/url'
12  }, (_, res, ctx) => {
13    return res(ctx.status(200))
14  })

Middleware

Define middleware.

Basic usage

1import { rest } from 'mswx'
2
3
4const AuthTokenMiddleware = rest.middleware((req, res, ctx, next) => {
5  const authorization = req.headers.get('Authorization')
6  if (authorization === 'Bearer token') {
7    // Must call next(), it will continue execute.
8    return next()
9  }
10  return res(ctx.status(401), ctx.json({ message: 'Unauthorized.' }))
11})
12
13// The following is the original usage of msw handler.
14const authTokenHandlers = [
15  rest.get('/token', (_, res, ctx) => {
16    return res(
17      ctx.status(200),
18      ctx.json({
19        data: 'token'
20      })
21    )
22  })
23]
24
25export const handlers = [
26  ...authTokenHandlers.map(AuthTokenMiddleware),
27]

Apply multiple middlewares

You can apply multiple middleware as follows:

1handlers.map(MiddlewareA).map(MiddlewareB)

Note: execute order is B then A... so on.

For more examples can refer to the test code on GitHub.