mswのモックにOpenAPIスキーマのexampleを使う

フロントエンド開発をしているとAPIがない状況でリクエスト部分を含めた動作確認をしたい場合があります。

今回はmswを使います。

mswjs.io

mswはモックAPIを作成するライブラリのひとつです。
アプリケーションと一緒に動かしてリクエストに割り込んでモックを返すところが特徴的で、モック用のサーバーを立てて向き先を切り替えるというような設定をせずに使えます。
ブラウザ上ではService Worker、node上ではサーバーとして動きStorybookやCI上のJestでも使いやすいです。

事前に用意した openapi.json と create-react-app で生成したReactプロジェクトに追加します。

npm install -D msw
mkdir src/mocks
touch src/mocks/handlers.js

// handlers.js
import { rest } from 'msw';
import openapi from '../openapi/openapi.json';


export const handlers = [
  // "http://localhost:8080" の "/" にアクセスするGETリクエストの定義
  rest.get('http://localhost:8000/', (_, res, ctx) => {
    // OpenAPIで生成したJSONファイルのexampleをレスポンスとして渡す
    const response = openapi.paths['/'].get.responses[200].content['application/json'].example;
    return res(
      ctx.json(response),
      ctx.status(200),
    )
  }),
]

https://github.com/ihch/msw-openapi/blob/main/src/mocks/handlers.ts

github.com