msw-storybook-addon

import type { Meta, StoryObj } from '@storybook/react'; import { http, HttpResponse } from 'msw'; import { initialize, mswLoader } from 'msw-storybook-addon'; import { within, expect } from '@storybook/test'; // Assuming a simple React component that fetches user data const UserProfile = () => { const [user, setUser] = React.useState(null); React.useEffect(() => { fetch('/api/user') .then(res => res.json()) .then(data => setUser(data)); }, []); if (!user) return <div>Loading user...</div>; return ( <div> <h1>User Profile</h1> <p>Name: {user.name}</p> <p>Email: {user.email}</p> </div> ); }; // --- Configure in .storybook/preview.ts (or .js) --- // initialize({ // onUnhandledRequest: 'bypass', // }); // export const loaders = [mswLoader]; // --------------------------------------------------- const meta: Meta<typeof UserProfile> = { title: 'Components/UserProfile', component: UserProfile, parameters: { // Default MSW handlers for all stories under this meta msw: { handlers: [ http.get('/api/user', () => { return HttpResponse.json({ name: 'John Doe', email: 'john.doe@example.com' }); }), ], }, }, // Apply mswLoader globally to ensure mocks are active loaders: [mswLoader] }; export default meta; type Story = StoryObj<typeof UserProfile>; export const DefaultUser: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await canvas.findByText('Name: John Doe'); await expect(canvas.findByText('Email: john.doe@example.com')).toBeInTheDocument(); }, }; export const AdminUser: Story = { parameters: { msw: { handlers: [ // Override specific handlers for this story http.get('/api/user', () => { return HttpResponse.json({ name: 'Admin User', email: 'admin@example.com', role: 'admin' }); }), ], }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await canvas.findByText('Name: Admin User'); await expect(canvas.findByText('Email: admin@example.com')).toBeInTheDocument(); }, };