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";