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
70
mswでフロントエンドのインテグレーションテストを実装する
mswでフロントエンドのインテグレーションテストを実装する
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
26
Flutter HooksとRiverpodの解説
wheatandcat
0
38
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
99
App Routerの紹介
wheatandcat
0
41
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
150
T3 Stack + Supabaseでアプリを作ってみる
wheatandcat
0
130
Supabaseの紹介
wheatandcat
0
130
tRPCの紹介
wheatandcat
0
110
Plasmoの紹介
wheatandcat
0
52
Other Decks in Technology
See All in Technology
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Writing Fast Ruby
sferik
623
60k
How to Think Like a Performance Engineer
csswizardry
4
590
RailsConf 2023
tenderlove
16
720
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Designing Experiences People Love
moore
136
23k
Scaling GitHub
holman
458
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Designing for Performance
lara
604
67k
The Mythical Team-Month
searls
217
43k
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 周りの自動生成周りのツールと相性が良い テストから仕様が把握できるコードにしやすくなった
ご清聴ありがとうございました