フロントエンドでもテストを書きたいのでJestに入門してみた

https://hrbrain.connpass.com/event/288619/ にてLTしました。

Transcript

1. フロントエンドでもテストを書きた
   いのでJestに入門してみた
   @inoway46（Twitter）
   

   View Slide

2. 自己紹介
   - GMOペパボでECアプリの開発をしています。
   - Rubyでサーバーサイドの開発がメインで、最近初めて仕事で Reactを書きました。
   - 自動テストが大好きです。
   - 最近Netflixでみた『リズム＋フロー』が面白かったのでおすすめです。
   

   View Slide

3. テストを書く理由
   - 動作確認を効率化できる
   - 将来的なバグを防げる
   - 安全にリファクタリングできる
   - ドキュメンテーションの役割
   結果として、保守性の高いコードになる
   + 重たい処理や未完成のAPI等をmockすることで先回りの実装ができる
   

   View Slide

4. フロントエンドのテストで気をつけること
   - バックエンドと比較して、フロントエンドのコードは変わりやすい
   - テストを書いても、テスト対象自体が無くなってしまう可能性が高かったりする
   - なので、テストをたくさん書きすぎるのはメンテコストが高くなるので良くない
   

   View Slide

5. 何をどこまでテストすべきなのか
   - Reactにおいては、複数のコンポーネントを統合した 1ページ単位でテストを書いていくのが最もコス
   トパフォーマンスが高い（意訳）
   - Testing Trophyという概念における、インテグレーション（結合）テストのこと
   - 参照: フロントエンドのテスト戦略について考える
   (https://zenn.dev/koki_tech/articles/a96e58695540a7)
   React の テスト方針を調べた
   (https://zenn.dev/longbridge/articles/38572a8a9970f4)
   

   View Slide

6. Jestとは
   Jestとは、Facebookが開発したJavaScriptのためのテストフレームワークで Reactを用いたフロントエ
   ンド開発でよく使われる
   - Zero-configuration: Jestは初期設定が非常に簡単で、プロジェクトに Jestを追加するだけでテスト
   を書き始めることができます。
   - 豊富なAPI: Jestは、単体テスト、統合テスト、スナップショットテストといったさまざまな種類のテスト
   をサポートしています。また、 mockやspyといった高度なテストテクニックをサポートしています。
   - 高速な並列実行: Jestはテストケースを並列に実行することで、テストの実行時間を大幅に短縮しま
   す。
   

   View Slide

7. Jestでmockする
   mock = テストダブルを使用すること（意訳）
   Jestでは主に以下の3種類のテストダブルを使用します
   - Mock Functions (モック関数): jest.fn()
   - Mock Modules (モックモジュール): jest.mock()
   - Spy (スパイ): jest.spyOn()
   

   View Slide

8. jest.fn()
   Mock Functions (モック関数):
   特定の関数がどのように呼び出された
   かを記録するためのダミーの関数。
   関数が期待通りに呼び出されている
   か、必要な引数で呼び出されているか
   などを検証できます。
   

   View Slide

9. jest.mock()
   Mock Modules (モックモジュール):
   モジュール全体をmockする。
   ネットワークリクエストや DBアクセスな
   ど、テスト中に実行したくない処理を置
   き換えるのに役立ちます。
   requireActualを使用することで、一部
   の関数のみmockできます。
   

   View Slide

10. jest.spyOn()
    Spy (スパイ):
    既存の関数がどのように呼び出される
    かを追跡する。
    スパイは関数自体の挙動を変更しない
    ため、元の関数が呼び出されたかどう
    か、またどのような引数で呼び出された
    かを検証することができます。
    

    View Slide

11. Jestを使ってみた感想
    - 並列実行されているため、 beforeEachだと適切にmockできず、jest.mock()でテストファイル全体に
    適用しないといけないケースがあった
    - マッチャが豊富にあるためどれを使って検証しようか迷う。でも多様なケースに対応できて便利
    - RSpecのように行数指定してテスト実行はできないけど、 .onlyと書くことで必要なテストのみ走らせ
    ることができるのが便利だった
    テスト書くの楽しい！！
    

    View Slide

12. Twitterやってます
    @inoway46
    

    View Slide