MSWの活用

2024/06/25 に BEENOS 株式会社主催LT会「BEELT」で発表した際の資料になります。
API モックサービスワーカーのライブラリ MSW についてお話しさせていただきました。とても便利なライブラリなのでおすすめです。

Transcript

1. MSW (Mock Service Worker) の活用
2. 野口 将輝 2024年4月 BEENOS 株式会社 入社 2023年5月から2024年3月まで内定者インターン 趣味: 野球観戦、服、コーヒー 今興味のある技術: GitHub Actions 現在は研修課題のアプリ制作でインフラを主に担当 技術スタック: React, NextJS, Laravel 自己紹介 0
3. 1 2 4 3 アジェンダ 0 MSW とは？ MSW の設定方法 MSW の活用 MSW 使用上の Tips
4. みなさん、フロントエンドでテストしてますか？ MSW とは？ 1
5. API モックとは？ API の本番環境をシミュレーションするために、仮想的なレスポンスを生成する技術 やプロセスのこと。モック API は、開発、テスト、およびデモ目的で使用される。 API モックを利用する目的 ・フロントエンド・バックエンドを並行に開発する ・テストの自動化 ・ネットワーク依存性の排除 ・リソース節約 MSW とは？ 1
6. MSW (Mock Service Worker)とは 外部へのリクエストをインターセプトして MSW で設定したレス ポンスを返すAPIモックサービスワーカー MSW とは？ 1
7. 従来の API モック手法 1 サーバーレベル モックサーバーを立ち上げ、テスト対象のアプリケ ーションはこのモックサーバーにリクエストを送信 する。 このサーバーが事前に設定したレスポンスを返す。 ex) JSON Server HTTPクライアント JSONファイル Backend DB JSON Server 呼び出し元 欠点2: POST 通信を行うとデータ元となるデータが更新さ れる（回避策はあるもののデータの生成が困難） 欠点1: エンドポイントをテスト環境と本番環境で切り替 える必要がある 欠点3: データの型安全性を保証できない MSW とは？ 1 Localhost:xxx/users/1 https://xxx.com/users/1
8. 従来の API モック手法 2 クライアントレベル 呼び出し元 Jest のモック Backend DB HTTPクライアント モックデータ 欠点1: HTTP クライアントについてのテストが難しい 欠点2: 固定データしか返すことができない ex) Jest アプリケーション内部で、リクエストを送る関数や ライブラリをモック化する。 例えば、Axios や Fetch などのリクエストライブラ リをモックライブラリで置き換える MSW とは？ 1 https://xxx.com/users/1
9. MSW の場合 呼び出し元 MSW Backend DB HTTPクライアント MSW が働く環境に設定することで、HTTP クライアント がリクエストを飛ばすと、その URL にマッチするリクエ ストをインターセプトして MSW が代わりに handler に 設定したレスポンスを返す handler サーバーレベルのモックの欠点 ・エンドポイントをテスト環境と本番環境で切り 替える必要がある ・POST 通信を行うとデータ元となるデータが更新 される （回避策はあるもののデータの生成が困難） ・データの型安全性を保証できない クライアントレベルのモックの欠点 ・HTTP クライアントについてのテストが難しい ・固定データしか返すことができない → @mswjs/data で対応可能 (今回は省略) 解決！ MSW とは？ 1 インターセプト https://xxx.com/users/1
10. Step 2 インストール handler の作成 引用: MSW公式サイト/Getting started (https://mswjs.io/docs/getting-started) Step 1 MSW の設定方法 2 handler は、url と resolver で構成される
11. MSW の設定方法 2 MSW の利用設定 (Node.js 環境用) Step 3 Step 4 MSWの起動 引用: MSW公式サイト/Getting started (https://mswjs.io/docs/getting-started)
12. MSW の活用 3 MSW無効時 MSW有効時 （Nextjs.13 の App Directory には未対応 ） https://github.com/mswjs/msw/issues/1644 ブラウザ上での確認 JSONPlaceholder にリクエスト を飛ばしている
13. テストコードでの利用 MSW の活用 3
14. MSW の活用 3 autodocs 機能は使えないみたいです Storybook での利用
15. → handler をテストなどで上書きするときに、他のパスへの影響を防げる！ MSW 使用上の Tips 4 1. Factory Method パターンの活用 ・resolver 以下は Factory Method にしておくと（個人的に）利用しやすい ・handler ・handlers (パスごとに handler をまとめた配列) → override 変数を渡すことで変数を上書きするような設定にする → error レスポンスの切り替えを簡単にできる + mock が一つの箇所にまとめられるので、保守性 UP!
16. MSW 使用上の Tips 4 resolver を Factory Method にする例 handlerを Factory method にする例
17. MSW 使用上の Tips 4 handlers に Factory を利用する例
18. MSW 使用上の Tips 4 2. JSDoc コメントの記述
19. Thank you!