Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドテストのためのMSW

388385792fb2f7f25a5b42bec43d5434?s=47 Hirorou
March 31, 2022

 フロントエンドテストのためのMSW

【オンライン】エンジニア達の「〇〇完全に理解した」Talk #27 で話した内容です。
https://easy2.connpass.com/event/241509/ 

388385792fb2f7f25a5b42bec43d5434?s=128

Hirorou

March 31, 2022
Tweet

Other Decks in Programming

Transcript

  1. フロントエンドテストのためのMSW (Mock Service Worker)

  2. 目次 • 前提 • 背景 • 開発環境要件と解決策 • 課題 •

    新たな開発環境要件と解決策 • MSWの利点と懸念点 • 今後
  3. 前提 • MSWについて、完全に理解した(20%)の気持ちで話します。 • 今回出てくるフロントエンド(FE)エンジニアはReactやVueなどで 開発している方を想定しています。

  4. 背景 • 機能開発を行う際に、開発者一人がAPI開発と UI開発の両方を 担当している。 • しかし、システムの規模やエンジニアの人数が将来的に大きく なることを考慮して、BE(バックエンド) とFE(フロントエンド) を分ける開発体制の準備を始めたい。

  5. 開発環境要件と解決策 • 開発環境要件 • REST APIで作成 • OpenAPI Specificationを設計書代わりに手動で記入、FEとBEに別々で開発 •

    FE側は OpenAPI Specificationで設計したValidationやMockデータを使用したい • その時の解決策 • Prismの使用 • PrismとはStoplight社が提供するOSSのOpen API SpecificationをベースにしたMock Server と Validation Proxyである。 • 構築時にServerを起動する必要あり • GitHub: https://github.com/stoplightio/prism
  6. 課題 • PrismではVueやReactのためのError Objectを返却することができ なかった • →JSやTSのObjectを返却してくれるMock API環境が欲しい • そのため、FEテストでMock

    APIを活用できなかった。 (Unit, Component, E2E Test) ↑私が調べた範囲内の内容です。もしかしたらPrism内で解決策はあるか もしれません。
  7. 新たな開発環境要件と解決策 • 開発環境要件 • REST APIで作成 • OpenAPI Specificationを設計書代わりに手動で記入後、FEとBEに別々で開発 •

    FE側は OpenAPI Specificationで設計したValidationやMockデータを使用したい • JSやTSのObjectを返却してくれるMock API環境が欲しい (MSW以外にもこれを満たすツールはありますがMSWの公式ドキュメントのComparison読むと分かりやすいです。) • 解決策 • Mock Service Worker (MSW)の使用 (理由:去年11月頃、少し記事で見かけたため) • MSWとは Service Worker APIを活⽤して実際のRequestを仲介するMock API Library • GitHub: https://github.com/mswjs/msw • Service Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
  8. MSWの利点と懸念点 • 利点 • TypeScriptがSupportされている • Service Workerを経由するので、 サーバー構築が必要ない •

    Install後、スクリプトに記入するくらいの手間感 • スタブとは違い、ロジックも記述できるので柔軟なテストの幅が増える • API側のValidationや簡易的なビジネスロジック(Inputされるデータに応じてSuccess or Error ケースを分岐して返却) • ブラウザのNetworkタブにも反映される →公式ドキュメントのIntroductionとComparison, デモで確認 • 懸念点 • 前述で紹介した開発環境と比較 • FE側でOpen API Specificationを基に、Mock APIとValidationを作成してもらう時、 書き間違いが起こる可能性がある。 引用)h"ps://mswjs.io/
  9. 今後 • GraphQLにも対応しているので取り組みたい • GraphQLに適したMSWのコードを生成して、型推論まで行うツ ールがあるらしい • GitHub: https://www.graphql-code-generator.com/plugins/typescript-msw