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
Yohei Iino
November 22, 2022
Technology
0
100
mswでフロントエンドのインテグレーションテストを実装する
mswでフロントエンドのインテグレーションテストを実装する
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
11
作成中のFlutterアプリの中間発表
wheatandcat
0
17
最近読んだ技術書を簡単紹介
wheatandcat
0
36
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
49
Firebase App Checkを実装したので紹介
wheatandcat
0
61
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
200
Flutter HooksとRiverpodの解説
wheatandcat
0
290
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
280
App Routerの紹介
wheatandcat
0
80
Other Decks in Technology
See All in Technology
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
120
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
完璧を捨てろ! “攻め”のQAがもたらすスピードと革新/20250306 Hiroki Hachisuka
shift_evolve
0
110
MIMEと文字コードの闇
hirachan
2
1.5k
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
170
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
170
事業を差別化する技術を生み出す技術
pyama86
2
530
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.2k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
3
1k
エンジニアのキャリアパスと、 その中で自分が大切にしていること
noteinc
3
200
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Fireside Chat
paigeccino
35
3.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
How to train your dragon (web standard)
notwaldorf
91
5.9k
Gamification - CAS2011
davidbonilla
80
5.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Transcript
msw でフロントエンドの インテグレーションテストを実装する Press Space for next page
自己紹介 📝 飯野陽平(wheatandcat ) 🏢 フリーランスエンジニア(シェアフル株式会社CTO ) 💻 Blog: https://www.wheatandcat.me/
🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
msw とは msw(Mock Service Worker) は、ネットワークレベルでAPI リクエストをインターセプトしてmock のデータ を返すためのライブラリ Service
Worker を使用しているので、別プロセスでローカルのサーバーを立ち上げる必要が無く手軽に利 用できる フロントエンドのテストコードやStroybook などでも利用可能 デフォルトでRESTful API とGraphQL をサポートしている msw Service Worker とは msw Choose an API
インテグレーションテストとは? フロントエンドのテストは主に以下の4 つに分 類される End to End Integration Unit Static
上位レイヤーに行くほど以下の特徴がある フィードバックの速度は遅い 実装コストは高い 信頼性は向上する The Testing Trophy and Testing Classifications
インテグレーションテストのこれまで ① msw 導入前だと各API をjest のmock 機能を使用してAPI のコールメソッドを、すべてmock させて実装させて いく必要があった
コード的には次のようになっていた
インテグレーションテストのこれまで ② describe("components/pages/ItemDetail/Connected.tsx", () => { jest.spyOn(queries, "useItemQuery").mockImplementation((): any =>
({ loading: false, data: { item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
インテグレーションテストのこれまで ② jest.spyOn(queries, "useItemQuery").mockImplementation((): any => ({ loading: false, data:
{ item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); describe("components/pages/ItemDetail/Connected.tsx", () => { const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
インテグレーションテストのこれまで ② describe("components/pages/ItemDetail/Connected.tsx", () => { jest.spyOn(queries, "useItemQuery").mockImplementation((): any =>
({ loading: false, data: { item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
モチベーション 今までmock 作業で実装に時間の掛かったインテグレーションテストを簡単に実装できる状態にしたい また、実際の動作に伴ったシナリオテストを実装できる状態にしたい
実装に使用したライブラリ msw typed-document-node graphql-codegen-typescript-mock-data testing-library/react-native
実装PR typed-document-node への移行 msw を導入してGraphQL をモックしたテストコードを書く① msw を導入してGraphQL をモックしたテストコードを書く②
実装してみた ① まずは、typescript-react-apollo →typed-document-node 移行を実装 PR: typed-document-node への移行 実装の紹介 こちら、次のPR
で使用するgraphql-codegen-typescript-mock-data を使用しやすくするために移行 typed-document-node は特定のGraphQL クライアントに依存せずにGraphQL のtype を自動生成してくれる codegen のプラグイン
実装してみた ② 次に、msw とgraphql-codegen-typescript-mock-data を導入 PR: msw を導入してGraphQL をモックしたテストコードを書く① 実装の紹介
graphql-codegen-typescript-mock-data は、GraphQL のSchema 情報からダミーデータを生成してくれるライ ブラリ これを利用することでmock データを保守を自動生成で補うようにする 参考コード msw は以下の部分でテスト時に起動させる 参考コード テストは以下の通りに記載 参考コード
実装してみた ③ 最後に、前のPR からの追加で、より正確なシナリオテストを実装 PR: msw を導入してGraphQL をモックしたテストコードを書く② 実装の紹介 アイテムの更新のシナリオテストを追加
参考コード testing-library/react-native を使用して各入力を設定 参考コード 入力に設定した値と更新のAPI 時に設定された値とGraphQL の variables を比較して一致しているかテスト 参考コード
まとめ msw を使えば気軽にインテグレーションテストを書けて、かなり良い。 graphql-codegen 周りの自動生成周りのツールと相性が良い テストから仕様が把握できるコードにしやすくなった
ご清聴ありがとうございました