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
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
130
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
Leading Effective Engineering Teams in the AI Era
addyosmani
3
370
株式会社 Sun terras カンパニーデック
sunterras
0
290
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
730
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
240
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
4 Signs Your Business is Dying
shpigford
185
22k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
RailsConf 2023
tenderlove
30
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Designing for humans not robots
tammielis
254
26k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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