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
51
mswでフロントエンドのインテグレーションテストを実装する
mswでフロントエンドのインテグレーションテストを実装する
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
31
App Routerの紹介
wheatandcat
0
18
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
45
T3 Stack + Supabaseでアプリを作ってみる
wheatandcat
0
87
Supabaseの紹介
wheatandcat
0
90
tRPCの紹介
wheatandcat
0
73
Plasmoの紹介
wheatandcat
0
48
Playwrightの紹介
wheatandcat
0
120
Vitestの紹介
wheatandcat
1
82
Other Decks in Technology
See All in Technology
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
120
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
740
データベース02: データベースの概念
trycycle
0
130
Databricks における 『MLOps』
databricksjapan
2
160
On Your Data を超えていく!
hirotomotaguchi
2
620
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
160
本当のAWS基礎
toru_kubota
0
380
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.4k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
380
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
250
Postman v10リリース後を振り返る
nagix
0
170
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.9k
Unsuck your backbone
ammeep
662
57k
It's Worth the Effort
3n
180
27k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
What's in a price? How to price your products and services
michaelherold
237
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
In The Pink: A Labor of Love
frogandcode
138
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
Side Projects
sachag
451
41k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
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 周りの自動生成周りのツールと相性が良い テストから仕様が把握できるコードにしやすくなった
ご清聴ありがとうございました