StorybookをGithub.ioにサブディレクトリを切って公開してMSWを導入したメモ

概要

前回はStorybookを公開した。
今回、MSWを使ってAPIの戻り値をモックしたものをStorybookで見せるストーリーを記述。
公開時にmockServiceWorker.jsが404になってしまう問題があったので対処した。

追加したストーリー： my/profile をモック化

この時点のソース

環境

• @storybook/react: 7.0.17
• msw: 1.2.1

ソースコード

githubにアップしたときのみ、MSWのオプションにserviceWorkerのURLを設定してあげるのがポイント。(参考)

.storybook/preview.ts

import type { Preview } from "@storybook/react";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import { initialize, mswDecorator } from "msw-storybook-addon";
import { handleGetMyProfile } from "../src/services/client/MyProfile/__mock__/msw";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    viewport: {
      viewports: INITIAL_VIEWPORTS,
    },
    msw: { handlers: [handleGetMyProfile()] },
  },
};

export default preview;
export const decorators = [mswDecorator];
- const options = {};
+ const options =
+   location.hostname !== "hibohiboo.github.io"
+     ? {}
+     : {
+         serviceWorker: {
+           url: "/RinneCircle/storybook-static/mockServiceWorker.js",
+        },
+       };
initialize(options);