Mock Service Worker (MSW) is a tool that allows you to mock HTTP requests during testing and when developing Storybook stories. MSW starts automatically when you run tests or Storybook.
MSW uses handlers to intercept and handle requests. Here is an example of a handler for the /comments endpoint:
export const commentHandlers = [
rest.get('/comments', (req, res, ctx) => {
// checks if storybook story name includes loading
if (isMockLoading()) {
// returns infinite delay response
return res(ctx.status(200), ctx.json({}), ctx.delay('infinite'))
}
// checks if story name includes "error"
if (isMockError()) {
return res(ctx.status(500), ctx.json({}))
}
// checks if story name includes "empty"
if (isMockEmpty()) {
return res(ctx.status(200), ctx.json([]))
}
// for story specific states use `isStoryNameIncludes`
if (isStoryNameIncludes('unauthorized')) {
return res(ctx.status(500), ctx.json({}))
}
// returns mock data
return res(ctx.status(200), ctx.json(mockComments))
}),
]
All MSW handlers files and variables includes "Handlers" e.g. commentHandlers
, profileHandlers
,commentHandlers.ts
.
Handlers should be created inside the same slice inside mocks
folder or in shared layer if they aren't connected to any slice (e.g. imageHandlers)
Link to the documentation here