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
670
フロントエンドでもテストを書きたいので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
240
Other Decks in Programming
See All in Programming
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
580
ペパボOpenTelemetry革命
pyama86
2
200
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
slow types ってなんだろう?
karad
0
200
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.2k
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
600
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
560
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
570
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
290
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
Featured
See All Featured
Statistics for Hackers
jakevdp
790
220k
Music & Morning Musume
bryan
41
5.6k
We Have a Design System, Now What?
morganepeng
43
6.8k
4 Signs Your Business is Dying
shpigford
176
21k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Invisible Customer
myddelton
114
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
A better future with KSS
kneath
231
16k
Scaling GitHub
holman
457
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
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