Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドテストのためのMSW
Search
Hirorou
March 31, 2022
Programming
0
1.1k
フロントエンドテストのためのMSW
【オンライン】エンジニア達の「〇〇完全に理解した」Talk #27 で話した内容です。
https://easy2.connpass.com/event/241509/
Hirorou
March 31, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
470
Workers を定期実行する方法は一つじゃない
rokuosan
0
120
Porting a visionOS App to Android XR
akkeylab
0
910
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
PHPカンファレンス関西2025 基調講演
sugimotokei
5
920
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
250
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.1k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Code Reviewing Like a Champion
maltzj
524
40k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
4 Signs Your Business is Dying
shpigford
184
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
Designing for Performance
lara
610
69k
Done Done
chrislema
184
16k
Six Lessons from altMBA
skipperchong
28
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Transcript
フロントエンドテストのためのMSW (Mock Service Worker)
目次 • 前提 • 背景 • 開発環境要件と解決策 • 課題 •
新たな開発環境要件と解決策 • MSWの利点と懸念点 • 今後
前提 • MSWについて、完全に理解した(20%)の気持ちで話します。 • 今回出てくるフロントエンド(FE)エンジニアはReactやVueなどで 開発している方を想定しています。
背景 • 機能開発を行う際に、開発者一人がAPI開発と UI開発の両方を 担当している。 • しかし、システムの規模やエンジニアの人数が将来的に大きく なることを考慮して、BE(バックエンド) とFE(フロントエンド) を分ける開発体制の準備を始めたい。
開発環境要件と解決策 • 開発環境要件 • 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
課題 • PrismではVueやReactのためのError Objectを返却することができ なかった • →JSやTSのObjectを返却してくれるMock API環境が欲しい • そのため、FEテストでMock
APIを活用できなかった。 (Unit, Component, E2E Test) ↑私が調べた範囲内の内容です。もしかしたらPrism内で解決策はあるか もしれません。
新たな開発環境要件と解決策 • 開発環境要件 • 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
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/
今後 • GraphQLにも対応しているので取り組みたい • GraphQLに適したMSWのコードを生成して、型推論まで行うツ ールがあるらしい • GitHub: https://www.graphql-code-generator.com/plugins/typescript-msw