qiita.comはじめにこんにちは。フロントエンドエンジニアの村崎です。社会人になって8ヶ月が経ちました。みなさんはどのような方法でテストに使うmockを定義していますか?弊社では、OpenAPIを用いてスキーマ駆動開発を行っているプロダクト及びチームが多く存在し、フロント・サーバーそれぞれgeneratorを用いて型を自動生成しています。そこで、スキーマからテストで扱うmockデータも生成できたら便利ではないか?と考えました。今回はOpenAPIのスキーマからmockを生成して、フロントエンドのあらゆるテストで使い倒す方法を紹介します。最終形のコードはこちらになります。github.com現在開発を担当しているプロダクトでViteを採用しているため、この記事でもViteを用います。全体の環境は以下になります。Library使用するスキーマ今回使用するスキーマはこちらです。パラメータで指定したidのTodoを返すAPIが定義されてるだけのスキーマになります。exampleキーが今回生成するmock対象になります。falseyamlからmockを生成するスキーマがjsonであればそのままimportできるのですが弊社ではyamlが採用されているため、そのままでは読み込めません。今回は、Viteを使用しているためこちらのrollupのpluginを使用します。yaml()],})読みこんだyamlを元にmockを返す関数を用意します。実際の開発では、OpenAPIから生成した型をそのまま使わず、アプリケーション内で定義した型に変換する場合もあるので、アプリケーション内で定義したdomainの型に変換してくれる関数も用意します。中身はfetch時に呼ぶdto関数をそのまま呼んでいるだけです。...todo,})また、このままだと.yamlが読み込めないとTypeScriptに怒られるため定義します。data}domainとdtoの中身はこちらです。申し訳程度にフロント用のプロパティを追加しています。使い道はなさそうです。'',})Storybook実際にmockを使っていきましょう。Storybookです。アプリケーションと合わせるためにbuilderにViteを指定します。先ほど追加したrollupのpluginをここでも追加します。},}テストコードは用意したdomain用の関数をimportして呼ぶだけになります。CSF3の記法で書いています。},}対象のコンポーネントはこちらです。propsでもらったtodoを表示させるだけのシンプルなコンポーネントです。</div>)TodoコンポーネントJest次にJestです。先ほどのdto関数のユニットテストを書いてみたいと思います。このままだとJest実行時にyamlが読めずエラーになってしまうため、parserを用意する必要があります。今回はこちらのライブラリを使用します。速い方が嬉しいためSWCを使用していますが、ts-jestやbabel-jestでも大丈夫です。テストは、用意したmock関数を呼び出すだけです。})})MSWMSWも用意したmock関数を呼ぶだけです。サーバーから直接返ってくるデータのため、OpenAPIの型のTodoを返す関数を呼んでいます。Library直接mockを使用している訳ではないのですが、MSWを活用しているため少しですが書いてみます。useTodo内ではreact-queryを使用していますが、SWRでも同じテストが書けます。})})まとめOpenAPIスキーマから生成したmockを使用することで、より本番に近く、一貫性があるデータでテストを書くことができました。スキーマが保守されていれば常に最新の値を反映できるのが嬉しいところです。ここはこうした方がいい!やもっといいやり方あるよ!という方がいましたら、是非教えてください。13:00関連記事2020-12-13HARファイル+axios-mock-adapterで固有環境の不具合を再現するこんにちは。二度目の登場のフロントエンド担当川口です。こ...2020-07-30社内コード規約をLintに移行するはじめまして。Award受賞の裏側:GitHub通知の最適活用法エンジニア積極採用中!会社概要HRBrainとはお問い合わせ引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。