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
フロントエンドでもテストを書きたいのでJestに入門してみた
Search
inoway46
August 03, 2023
Programming
1
1.1k
フロントエンドでもテストを書きたいのでJestに入門してみた
https://hrbrain.connpass.com/event/288619/
にてLTしました。
inoway46
August 03, 2023
Tweet
Share
More Decks by inoway46
See All by inoway46
RESTからGraphQL APIへの移行で学んだこと
inoway46
1
330
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
11
2.3k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
220
What's new in Spring Modulith?
olivergierke
1
130
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
1.8k
Devoxx BE - Local Development in the AI Era
kdubois
0
120
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
960
Catch Up: Go Style Guide Update
andpad
0
210
クラシルを支える技術と組織
rakutek
0
200
スマホから Youtube Shortsを見られないようにする
lemolatoon
2
520
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
How GitHub (no longer) Works
holman
315
140k
4 Signs Your Business is Dying
shpigford
185
22k
Mobile First: as difficult as doing things right
swwweet
224
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Ace a Technical Interview
jacobian
280
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
フロントエンドでもテストを書きた いのでJestに入門してみた @inoway46(Twitter)
自己紹介 - GMOペパボでECアプリの開発をしています。 - Rubyでサーバーサイドの開発がメインで、最近初めて仕事で Reactを書きました。 - 自動テストが大好きです。 - 最近Netflixでみた『リズム+フロー』が面白かったのでおすすめです。
テストを書く理由 - 動作確認を効率化できる - 将来的なバグを防げる - 安全にリファクタリングできる - ドキュメンテーションの役割 結果として、保守性の高いコードになる
+ 重たい処理や未完成のAPI等をmockすることで先回りの実装ができる
フロントエンドのテストで気をつけること - バックエンドと比較して、フロントエンドのコードは変わりやすい - テストを書いても、テスト対象自体が無くなってしまう可能性が高かったりする - なので、テストをたくさん書きすぎるのはメンテコストが高くなるので良くない
何をどこまでテストすべきなのか - Reactにおいては、複数のコンポーネントを統合した 1ページ単位でテストを書いていくのが最もコス トパフォーマンスが高い(意訳) - Testing Trophyという概念における、インテグレーション(結合)テストのこと - 参照:
フロントエンドのテスト戦略について考える (https://zenn.dev/koki_tech/articles/a96e58695540a7) React の テスト方針を調べた (https://zenn.dev/longbridge/articles/38572a8a9970f4)
Jestとは Jestとは、Facebookが開発したJavaScriptのためのテストフレームワークで Reactを用いたフロントエ ンド開発でよく使われる - Zero-configuration: Jestは初期設定が非常に簡単で、プロジェクトに Jestを追加するだけでテスト を書き始めることができます。 -
豊富なAPI: Jestは、単体テスト、統合テスト、スナップショットテストといったさまざまな種類のテスト をサポートしています。また、 mockやspyといった高度なテストテクニックをサポートしています。 - 高速な並列実行: Jestはテストケースを並列に実行することで、テストの実行時間を大幅に短縮しま す。
Jestでmockする mock = テストダブルを使用すること(意訳) Jestでは主に以下の3種類のテストダブルを使用します - Mock Functions (モック関数): jest.fn()
- Mock Modules (モックモジュール): jest.mock() - Spy (スパイ): jest.spyOn()
jest.fn() Mock Functions (モック関数): 特定の関数がどのように呼び出された かを記録するためのダミーの関数。 関数が期待通りに呼び出されている か、必要な引数で呼び出されているか などを検証できます。
jest.mock() Mock Modules (モックモジュール): モジュール全体をmockする。 ネットワークリクエストや DBアクセスな ど、テスト中に実行したくない処理を置 き換えるのに役立ちます。 requireActualを使用することで、一部
の関数のみmockできます。
jest.spyOn() Spy (スパイ): 既存の関数がどのように呼び出される かを追跡する。 スパイは関数自体の挙動を変更しない ため、元の関数が呼び出されたかどう か、またどのような引数で呼び出された かを検証することができます。
Jestを使ってみた感想 - 並列実行されているため、 beforeEachだと適切にmockできず、jest.mock()でテストファイル全体に 適用しないといけないケースがあった - マッチャが豊富にあるためどれを使って検証しようか迷う。でも多様なケースに対応できて便利 - RSpecのように行数指定してテスト実行はできないけど、 .onlyと書くことで必要なテストのみ走らせ
ることができるのが便利だった テスト書くの楽しい!!
Twitterやってます @inoway46