はじめに 新規開発のプロジェクトでテスト戦略を立ててしばらく開発をしています。そのテスト戦略の内の 1 つに Web API モックの運用ポリシーを決めていたのですが、大きな問題がなく運用ができているので「API モック戦略」と大袈裟に題してみました。 特に奇抜なことはしていないですが、振り返りとしてまとめたいと思います。 目的 Web フロントエンドの開発時にモック API を利用して動作確認・自動テストをしたい 開発サーバを起動するだけでブラウザで動作確認をしたい Testing Library などを用いた UI コンポーネントの振る舞いを自動テストしたい モックデータの管理を簡単にしたい ブラウザでの動作確認と自動テストで同じモックデータを利用したい 前提 API のモックサーバは Mock Service Worker (以下 MSW と呼ぶ)を利用する。MSW のメリットや利用
![Web フロントエンドにおける API モック戦略](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4c01b3d9ad68c238f78022cce0875a425fcfc6b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--vs4fs2YJ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AWeb%252520%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252581%2525AB%2525E3%252581%25258A%2525E3%252581%252591%2525E3%252582%25258B%252520API%252520%2525E3%252583%2525A2%2525E3%252583%252583%2525E3%252582%2525AF%2525E6%252588%2525A6%2525E7%252595%2525A5%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akazuhe%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBhMDJhMDVhMWUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)