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
950
フロントエンドでもテストを書きたいので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
300
Other Decks in Programming
See All in Programming
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
820
快速入門可觀測性
blueswen
0
480
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
900
Go の GC の不得意な部分を克服したい
taiyow
3
990
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
140
良いユニットテストを書こう
mototakatsu
11
3.5k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.3k
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.2k
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
120
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Optimising Largest Contentful Paint
csswizardry
33
3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Being A Developer After 40
akosma
89
590k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Gamification - CAS2011
davidbonilla
80
5.1k
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