Chapter 01

はじめに:この本について

Satoshi Takeda
Satoshi Takeda
2021.02.24に更新

この本について

この本は Web フロントエンドで実装された React コンポーネントに対してどのようなテストを書くかということについて触れた本です。

表紙でも触れているとおり下記のような課題感を持った Web フロントエンド開発者が対象となりそうです。

  • Web で調べてテストを写経してみたものの実践でどのようにすればよいか分からない
  • 結局何のためにテストコードを書いているか分からず継続するモチベーションがわかない
  • Jest でハマっているのか、テストライブラリでハマっているのか分からない

こういった課題に対して、読後はテストの考え方と React コンポーネントテストのアプローチについて読む前より一歩前に進められたら、と考えています。

Web で読める有用なリソース

本書で取り上げる JestReact Testing Library についてはさまざまな解説が多いため本書基本的な扱い方は解説しません。このテストランナー、ライブラリを選ぶ基準としては React のドキュメントで推奨されているといった話は Web にある多くのリソースが語っていることではあります。

本書は何が書いてあるか

次章では下記を定義します。

  • 「なぜテストを書くのか」
    • 「誰のために書くのか」
    • 「どのように、どういった方針で書いていくか」

そして実際のテストコードでは、よくあるカウンタコンポーネント実装に対するテストから、非同期のカウンタコンポーネント実装とそのテストについて書いていきます。その中で非同期などに適したテスト用ヘルパーや macrotask/microtask の話を織り交ぜ、Jest を使ってモジュールをスパイする方法についても触れていきます。

後半では Web フロントエンドで多く取り扱う API リクエストを伴ったコンポーネントのテストについて書いていきます。同じコンポーネントでも、ビルトインの window.fetch を Jest でモックする方法、リクエストをインターセプトしモックサーバのように振る舞わせる方法を比較し、テストアプローチのさまざまな手法について取り上げます。

最後は Context を利用した距離の離れたコンポーネントにおけるグローバルな状態をどうテストするかについて触れてまとめていきましょう。

本書は何が書いてないか

  • React の提供する API の解説
  • React コンポーネントの実装方法詳解
  • TypeScript を用いたコードについての解説
  • Jest 固有の、テストランナーとしての使い方の詳細
  • Hooks API に対するプラクティス

この本で扱うソースコードについて

これから扱うソースコードはすべて公開されています。

テストコードがメインとなった書籍ですが、動作するアプリケーションも同梱しています。コンポーネントは統合され Next.js でブラウザでの動作確認ができるようになっており、画面のコンポーネントに対してテストを配置した構成になっています。各章の説明でもコンポーネントの実装コードやテストコードなど該当箇所にリンクしていきます。

脚注
  1. @testing-library ファミリーの作者であり多くの OSS を作っています。テストに対する啓蒙、有料のビデオキャストなどフルタイムの教育者として活動をしているようです。 ↩︎