【MSW】ざっくりMSW

MSW（Mock Service Worker）というライブラリを知ったので調べてみた

mswjs.io

MSWは、Service Worker APIを使用して実際のリクエストをインターセプトするAPIモックライブラリ

キャッシュの目的でリクエストをキャプチャするというService Workerの機能を使って、モックサーバーを作らずともAPIモックとして利用する

Service Workerは、最新のすべてのブラウザーで実装されているので、workerファイルを配置してモックを宣言するだけで使うことができる

どのように使うのか

MSWでは、宣言型リクエストハンドラーを使用して、URL、RegExp、またはカスタム条件に基づいてリクエストをキャプチャし、モックされた応答を返す応答リゾルバー関数を提供する

// 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()

モックサービスワーカーのリクエストフロー 図はドキュメントより

Nodeサーバーとしても使える

Service Workerはブラウザ以外の環境では実行できないため、同じモック定義を再利用するためのAPIサーバーを同時に提供している

なので例えば、テストなのでも使えるとのこと

他のモックライブラリとの比較

ドキュメントには他のモックライブラリとの比較があったのでプロジェクトにあったものを検討したい Comparison - Mock Service Worker Docs

参考

@Takepepeさんがまとめている記事が参考になった zenn.dev

Storybookのアドオンもあるみたい

https://storybook.js.org/addons/msw-storybook-addon

ただ、Next.js のFast Refreshと一緒に使ったときにうまく動かないことがあるみたい