Open2022/03/26にコメント追加10

簡単な構成でテストデータを生成して、開発を進めていけるようにする

自動化

OpenAPI

MSW

ShotaCoffee

現状完全な自動化はできていません

これをなぞると出来上がるもの

API Client
型情報に基づくテストデータ
ローカル開発、storybook上、jest などで活用できる mock 環境

前提

openapi を用いた yaml や json がある。

構成アイデア

msw
msw-auto-mock で msw の handler をいい感じに生成する。
yaml などから openapi-generator-cli を用いて interface を生成
intermock で生成した interface に対応するデータを作成。
intermock で生成したテストデータを msw-auto-mock のレスポンスの中に置く。

大まかな流れ

openapi-generator で yaml から API リクエスト処理たちと、それぞれの型を抽出。
msw-auto-mock を使って 1 で生成したファイルから、 msw で使う handler を生成。
intermock を使って 1 で生成したファイルから、テストデータの JSON ファイルを生成
2で生成した handler のレスポンス部分に、3で生成したレスポンスデータのサンプルを記述

Mock Server を立ち上げずにリクエストをインターセプトして、クライアント開発の際に Mock データを扱えるようになるはず。

usage

msw のセットアップ

https://mswjs.io/docs/getting-started/install に基づいて特に凝った設定はしない。
https://mswjs.io/docs/getting-started/integrate/browser を行う。
handler と worker の設定は後で生成するのでスキップ

スキーマから型を生成

npm script 追加
api client はお好みのものを。（例のコードは axios を利用）
"schema:generate": "openapi-generator-cli generate -g typescript-axios -i ${schemaへのパス} -o ${生成先} --additional-properties=modelPropertyNaming=camelCase,supportsES6=true,withInterfaces=true,typescriptThreePlus=true"

handler の生成

npm script を追加
generate:handler": "npx msw-auto-mock ./mocks/schema.json -o ./mocks/mock.js,

storybook で使う場合

npm script を msw で設定した worker が動かせるように修正
storybook": "start-storybook -p 6006 -s public

preview.js に msw-auto-mock で生成した startWorker を呼び出すだけで良い

if (process.env.NODE_ENV === 'development') {
  startWorker();
}

最終的な package.json（こちらの情報に関するもののみ記載）

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "generate:handler": "npx msw-auto-mock ./mocks/schema.json -o ./mocks/mock.js"
    "schema:generate": "openapi-generator-cli generate -g typescript-axios -i ${schemaへのパス} -o ${生成先} --additional-properties=modelPropertyNaming=camelCase,supportsES6=true,withInterfaces=true,typescriptThreePlus=true"
  },
  "dependencies": {
    "axios": "0.21.4",
  },
  "devDependencies": {
    "@faker-js/faker": "6.0.0",
    "msw-auto-mock": "0.5.2",
    "@openapitools/openapi-generator-cli": "2.4.26",
    "@storybook/react": "6.4.19",
    "msw": "0.39.2",
  },
  "msw": {
    "workerDirectory": "public"
  }
}

ShotaCoffee

他環境構築が完了したら参考になる記事をぶら下げておく

MSW で加速するフロントエンド開発

ShotaCoffee

intermock で json 吐き出すところまでできたけど、ここからデータとして扱いやすくするのどうしようかな

ShotaCoffee

fs モジュールで json をパースしていい感じにできないか考える

ShotaCoffee

ダメっぽい

ShotaCoffee

api.ts （openapi-generator-cli）で生成した interface名に合致する値を取る形ならどうか。

ShotaCoffee

クライアント側で json を解析する形にする。

ShotaCoffee

import * as data from './data.json';
const jsonObject = JSON.parse(JSON.stringify(data));

[ctx.status(200), ctx.json(jsonObject[${keyName}])]

できた

ShotaCoffee

とりあえずミニマムでやりたいことはできた。
ほぼ自動で諸々生成して、最後 msw-auto-mock をいい感じに埋めるところだけまだ改善の余地がある