Zenn
Open10

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

#
自動化
OpenAPI
MSW
ShotaCoffeeShotaCoffee

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

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

  • 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 のレスポンスの中に置く。

大まかな流れ

  1. openapi-generator で yaml から API リクエスト処理たちと、それぞれの型を抽出。
  2. msw-auto-mock を使って 1 で生成したファイルから、 msw で使う handler を生成。
  3. intermock を使って 1 で生成したファイルから、テストデータの JSON ファイルを生成
  4. 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"
  }
}
ShotaCoffeeShotaCoffee

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

ShotaCoffeeShotaCoffee

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

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

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

できた

ShotaCoffeeShotaCoffee

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