Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
msw-storybook-addon
Advanced tools
The msw-storybook-addon package is an addon for Storybook that integrates with Mock Service Worker (MSW) to mock API requests. It allows developers to create and manage mock API responses directly within Storybook, making it easier to develop and test UI components in isolation.
Mocking API Requests
This feature allows you to mock API requests using MSW within Storybook. The code sample demonstrates how to initialize the addon, set up a decorator, and define a handler for a GET request to '/api/user'.
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { rest } from 'msw';
initialize();
export const decorators = [
mswDecorator,
];
export const handlers = [
rest.get('/api/user', (req, res, ctx) => {
return res(ctx.json({ username: 'John Doe' }));
}),
];
Configuring Handlers Per Story
This feature allows you to configure different handlers for each story. The code sample shows how to set up a handler for a specific story, overriding the default handler for the '/api/user' endpoint.
import { rest } from 'msw';
export default {
title: 'Example/Button',
parameters: {
msw: [
rest.get('/api/user', (req, res, ctx) => {
return res(ctx.json({ username: 'Jane Doe' }));
}),
],
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
label: 'Button',
};
Logging and Debugging
This feature provides logging and debugging capabilities for unhandled requests. The code sample demonstrates how to initialize the addon with a configuration that logs warnings for unhandled requests.
import { initialize, mswDecorator } from 'msw-storybook-addon';
initialize({ onUnhandledRequest: 'warn' });
export const decorators = [
mswDecorator,
];
storybook-addon-mock is a Storybook addon that allows you to mock API requests and responses. It provides a similar functionality to msw-storybook-addon but uses a different approach for defining and managing mocks. It is less integrated with MSW and may require more manual setup.
storybook-addon-apollo-client is an addon for Storybook that integrates with Apollo Client to mock GraphQL queries and mutations. While it focuses on GraphQL rather than REST APIs, it provides similar capabilities for mocking API responses within Storybook.
FAQs
Mock API requests in Storybook with Mock Service Worker.
We found that msw-storybook-addon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.