Skip to main content

MSW

Ladle has a build-in support for MSW v2. It allows API mocking by intercepting requests on the network level.

You just have to enable it in your .ladle/config.mjs:

/** @type {import('@ladle/react').UserConfig} */
export default {
addons: {
msw: {
enabled: true,
},
},
};

Ladle automatically sets up the MSW service worker for you - copying it over into the public folder. Ladle also re-exports MSW library so you don't have to install it yourself.

Usage

import type { Story } from "@ladle/react";
import { msw } from "@ladle/react";
import { useEffect, useState } from "react";

const FETCH_URL = "/api-url.json";

// Set default handlers for all stories
export default {
msw: [
msw.http.get(FETCH_URL, () => {
return msw.HttpReponse.json([{ id: 1, title: "msw post default" }]);
}),
],
};

export const Mocked: Story = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
try {
const data = await fetch(FETCH_URL);
const json = await data.json();
setPosts(json);
} catch (e) {
console.error(e);
}
}, []);
return (
<>
<h1>Posts</h1>
<ul>
{posts.map((post: { id: number; title: string }) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</>
);
};

// handlers for this story only
// Mocked.msw = [];

You can also use MSW to mock GraphQL requests. Check their documentation.

Import msw/node

When you need to setup node environment for MSW, you would use:

import { setupServer } from 'msw/node'

You can use the Ladle's version of MSW by using this import instead:

import { setupServer } from "@ladle/react/msw-node";