Zenn
📌

[Storybook] APIをmockしたい

2023/03/10に公開
React
Storybook
API
#
mock
tech

ReactでWeb APIのレスポンスに応じた挙動をテスト・実装したくなったので。
今回はStorybookのMock Server Worker(MSW) addonを使って実装した。

UI

今回は簡単に、記事のタイトル・内容・作成日時をJSONで返すRESTful APIを想定し、Appとstoriesを作った。

App.js
import { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://sample-restful-path")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="App">
      <h3>{data.title}</h3>
      <p>{data.contents}</p>
      <p>{data.created}</p>
    </div>
  );
}
App.stories.js
import React from "react";

import { rest } from "msw";

import App from "../App";

export default {
  title: "App",
  component: App,
}

const TestData = {
  title: "How to Mock API Services?",
  contents: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lorem et ligula accumsan dignissim nec ac nulla. Nunc eget lorem sed elit porttitor tempor. Nunc ultricies erat vel ex elementum consequat. Duis ullamcorper quis ante ut porta. Quisque mi urna, aliquet id commodo sed, sagittis sit amet lorem. Aliquam.",
  created: "2020-11-02 21:46:13",
};

const Template = () => <App />;

export const MockedSuccess = Template.bind({});
MockedSuccess.parameters = {
  msw: [
    rest.get("https://sample-restful-path", (_req, res, ctx) => {
      return res(ctx.json(TestData));
    }),
  ],
};

MSWのセットアップ

まずnpmでMSW addonをインストールする。

npm i msw msw-storybook-addon -D

続いて、publicにservice workerを作る。

npx msw init public/

Storybook内でMSWを有効にするため、初期化とdecoratorのexportをする。

.storybook/preview.js
import { initialize, mswDecorator } from "msw-storybook-addon"

initialize();

export const decorators = [mswDecorator];

これでstorybookを起動すればおｋ

追記

サンプルコードをGitHubに公開しました。後ほど最新版にアップグレードします。

参考

Discussion