[Mock Service Worker (MSW)](https://mswjs.io/) とは、Service Woker が API リクエストを受け取って、レスポンスを返すことができる API mock ライブラリです。

[Introduction - Mock Service Worker Docs](https://mswjs.io/docs/)

MSW を使えば、Storybook とテストで共通の API mock handler を使用することができて便利です。

Storybook で MSW を使用するにあたっていくつか設定が必要になります。



調べると 1 コンポーネントしかないような小さな example は出てくるのですが、コンポーネント毎に mock を分けられるような方法にしたかったので、今回はその手順を記録しておきます。

（本記事は Storybook 6.3.4, MSW 0.33.2 で動作を確認していますが、別のバージョンだと動作しない可能性があります。

その場合、[`msw-storybook-addon`](https://github.com/mswjs/msw-storybook-addon) など別の方法で代替することができます。）

<toc />

## 基本的な使い方

Storybook との連携に入る前に、MSW の基本的な使い方について軽く触れておきます。

以下は[公式ページ](https://mswjs.io/docs/#how-does-it-work)に記載していたコード例です。

```js
// src/mocks.js
import { setupWorker, rest } from 'msw'

const worker = setupWorker(
 rest.post('/login', (req, res, ctx) => {
 const isAuthenticated = sessionStorage.getItem('username')

 if (!isAuthenticated) {
 return res(
 ctx.status(403),
 ctx.json({
 errorMessage: 'Not authenticated',
 }),
 )
 }

 return res(
 ctx.json({
 firstName: 'John',
 }),
 )
 }),
)

// Register the Service Worker and enable the mocking
worker.start()
```

`setupWorker()` で Service Worker をセットアップし、`worker.start()` で立ち上げて、API mock を有効にします。

`setupWorker()` の引数にリクエスト形式、URL とレスポンス（request handlers）を指定します。

使用する際には `npx msw init` コマンドで `mockServiceWorker.js` を生成し、これを `public` ディレクトリなど、ルートパスから `/mockServiceWorker.js` としてアクセスできるディレクトリに配置する必要があります。

（これを知らずに 404 error を出して起動できないことがよくありました<img className="emoji" draggable="false" alt="😇" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f607.png"/>）

## Storybook で使うための設定をする

ここから Storybook で MSW を使えるようにしていきます。

### `mockServiceWorker.js` を生成

まずは必要となる `mockServiceWorker.js` を生成します。

`.storybook/public/` ディレクトリを作成し、これを static directory に指定します。

プロジェクトルートで以下のコマンドを入力します。

```bash hide_nums
npx msw init .storybook/public
```

すると `.storybook/public/mockServiceWorker.js` が生成されます。

### Storybook の static directory を指定

Storybook においてルートパスからアクセスできるディレクトリ（static directory）は `main.js` において `staticDirs` を指定するか、`-s` フラグを指定することで設定できます。

（`-s` フラグは [6.4 から deprecated になり](https://storybook.js.org/docs/react/api/cli-options#static-dir-deprecation)、`main.js` での設定に移行します。）

`.storybook/main.js` に設定を追加するか、

```js name=.storybook/main.js hl_lines=4
module.exports = {
 stories: [],
 addons: [],
 staticDirs: ['./public'],
}
```

`package.json` の npm script を変更します。

```json name=package.json ins=4 del=3
 {
 "scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook -s .storybook/public"
 }
 }
```

これで Storybook を立ち上げたときに `mockServiceWorker.js` が参照できるようになるはずです。

### Storybook 起動時に Service Worker を立ち上げる

先述の通り、mock を開始するには `setupWorker()` と `worker.start()` が必要です。

Storybook を立ち上げたときにすべての story に適用するため `.storybook/preview.js` で設定します。

```js name=.storybook/preview.js
import { setupWorker } from 'msw';

// Node 環境ではなくブラウザ環境にいることをチェック
if (typeof global.process === 'undefined') {
 // MSW をセットアップ
 const worker = setupWorker();
 // Service Worker を立ち上げる
 worker.start();
 // stories ファイルからアクセスできるように、worker をグローバルに参照できるようにする
 window.msw = { worker };
}
```

うまくいけば Storybook を立ち上げたときの console に `[MSW] Mocking enabled.` と表示されます。

現時点では `setupWorker()` の引数がないのですが、`worker.use()` を使うことで request handler を追加することができます。

MSW と Storybook 自体の設定はこれで完了です。

## コンポーネントの stories ファイルで使う

TypeScript の場合、`window.msw` としてアクセスしたときに TypeScript でエラーになってしまうので、まず型定義を追加しておきます。

```ts name=global.d.ts
import type { SetupWorkerApi } from 'msw';

declare global {
 interface Window {
 msw: { worker: SetupWorkerApi };
 }
}
```

次に各コンポーネントに request handlers と stories ファイルを配置します。

以下は handlers の例です。

```ts name=ComponentWithAPICall/mocks/handlers.ts
import { rest } from 'msw';
import type { GetResponse, GetResponseError } from '~/path/to/api/types';

const getUrl = '/api/path/to/get';

const getResponseExample: GetResponse = {
 data: 'something',
};

const getResponseErrorExample: GetResponseError = {
 message: 'failed',
};

export const handlers = {
 default: rest.get(getUrl, (req, res, ctx) => {
 return res(
 ctx.delay(1000),
 ctx.status(200),
 ctx.json(getResponseExample)
 );
 }),
 error: rest.get(getUrl, (req, res, ctx) => {
 return res(
 ctx.delay(1000),
 ctx.status(500),
 ctx.json(getResponseErrorExample)
 );
 }),
};
```

stories ファイルでの使用例は以下のようになります。

```tsx name=ComponentWithAPICall/ComponentWithAPICall.stories.tsx
import { handlers } from './mock/handlers';

const DefaultTemplate: ComponentStory<typeof ComponentWithAPICall> = (args) => {
 const { worker } = window.msw;

 useEffect(() => () => worker.resetHandlers());

 worker.use(handlers.default);

 return <ComponentWithAPICall {...args} />;
};

const ErrorTemplate: ComponentStory<typeof ComponentWithAPICall> = (args) => {
 const { worker } = window.msw;

 useEffect(() => () => worker.resetHandlers());

 worker.use(handlers.error);

 return <ComponentWithAPICall {...args} />;
};
```

テストのときも同じ `handlers` を使いまわせます。

```tsx name=ComponentWithAPICall/ComponentWithAPICall.test.tsx
import { setupServer } from 'msw/node';
import { handlers } from './mock/handlers';

const server = setupServer();

...
describe('when API request succeeded', () => {
 beforeEach(() => server.resetHandlers(handlers.default));
 ...
})

describe('when API request failed', () => {
 beforeEach(() => server.resetHandlers(handlers.error));
 ...
})
```

---

この記事が参考になったならうれしいです。

では <img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

## 参考

[How to mock APIs in Storybook with MSW (Mock Service Worker) | by Alexis Oney | Medium](https://alexis-oney.medium.com/how-to-mock-apis-in-storybook-with-msw-mock-service-worker-c0c5c91e6c9c)

<a href="https://mswjs.io/" target="_blank" rel="noopener noreferrer">Mock Service Worker (MSW)</a> とは、Service Woker が API リクエストを受け取って、レスポンスを返すことができる API mock ライブラリです。
<a href="https://mswjs.io/docs/" target="_blank" rel="noopener noreferrer">Introduction - Mock Service Worker Docs</a>
MSW を使えば、Storybook とテストで共通の API mock handler を使用することができて便利です。
Storybook で MSW を使用するにあたっていくつか設定が必要になります。
…

Storybook

Mock Service Worker (MSW) + Storybook の設定手順と使用例