$30 off During Our Annual Pro Sale. View Details »

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

inoway46
August 03, 2023

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

inoway46

August 03, 2023
Tweet

More Decks by inoway46

Other Decks in Programming

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