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
800
フロントエンドテストのためのMSW
【オンライン】エンジニア達の「〇〇完全に理解した」Talk #27 で話した内容です。
https://easy2.connpass.com/event/241509/
Hirorou
March 31, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
GitHub Copilotのススメ
marcy731
1
200
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Ruby GitHub Packages
bkuhlmann
0
630
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
GraphQLとの向き合い方2022年版
quramy
32
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Become a Pro
speakerdeck
PRO
11
4.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
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