Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドでもテストを書きたいのでJestに入門してみた
Search
inoway46
August 03, 2023
Programming
1
910
フロントエンドでもテストを書きたいので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
290
Other Decks in Programming
See All in Programming
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.4k
Symfony Mapper Component
soyuka
2
560
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
940
似たもの同士のPerlとPHP
uzulla
1
110
Cognitoが大型アップデート!Managed Loginとパスワードレスログインを実際に使ってみた@しむそくRadio Special Day1
tmhirai
3
260
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
760
CSC305 Lecture 25
javiergs
PRO
0
120
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
350
かんたんデザイン編集やってみた~「完全に理解した」までの道のり~
morit4ryo
1
120
Criando Commits Incríveis no Git
marcelgsantos
2
150
5分ぐらいで分かる、トリミング機能の作り方
tsutsuitakumi
0
210
React + Tauriでデスクトップアプリ開発に入門してみた
ynishimura0922
0
210
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
The Invisible Side of Design
smashingmag
298
50k
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Producing Creativity
orderedlist
PRO
341
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Designing Experiences People Love
moore
138
23k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
Facilitating Awesome Meetings
lara
50
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
31
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