Reactアプリのテストとデバッグ
コードが正しく動作するかどうか、推測するのはやめましょう。テストを活用して、確信を持って開発を進めましょう。
多くの開発者は、セットアップが難しすぎるという理由でテストをスキップしてしまいます。テストを「セーフティネット」ではなく、「面倒な作業」と考えてしまっているのです。
テストはコンピュータのために書くものではありません。未来の自分自身のために書くものです。深夜2時に関数を変更したとき、テストがあれば、何かを壊してしまったかどうかがすぐにわかります。
テストをピラミッドとして考えてみましょう：
• Unit Tests（ユニットテスト）：1つの関数やコンポーネントをテストします。実行速度が速く、数も多くなります。 • Integration Tests（統合テスト）：各パーツがどのように連携するかをテストします。高い信頼性をもたらします。 • E2E Tests（E2Eテスト）：ブラウザ上でアプリ全体をテストします。ログインやチェックアウトなどの重要なパスにのみ使用してください。
React Testing Libraryの黄金律：ユーザーに見えるものをテストする。
state変数をテストしてはいけません。CSSクラスをテストしてはいけません。内部ロジックをテストしてはいけません。ボタン、テキスト、入力をテストしてください。ユーザーに見えないものは、テストしないようにしましょう。
Arrange, Act, Assertのパターンに従いましょう：
- Arrange（準備）：コンポーネントをレンダリングする。
- Act（実行）：ボタンをクリックしたり、フィールドに文字を入力したりする。
- Assert（検証）：正しいテキストが画面に表示されているかを確認する。
APIコールのような非同期コードには、waitFor を使用します。これにより、結果を確認する前にデータの読み込みを待機できます。
本番環境でアプリがクラッシュする場合は、Error Boundariesを使用してください。これにより、1つのコンポーネントの不具合がページ全体を真っ白な画面にしてしまうのを防ぎ、ユーザーに対して適切なフォールバックを提供できます。
クイック・デバッグ・チェックリスト：
- ブラウザのコンソールでエラーを確認する。
- NetworkタブでAPIレスポンスを確認する。
- React DevToolsを使用して
propsとstateを調査する。 stateを直接変更（mutate）していないか確認する。useEffectの依存配列（dependency arrays）を確認する。
重要な部分のテストに集中しましょう。カバレッジ100%を目指す必要はありません。失敗したときに致命的な影響が出る機能に焦点を当てることが重要です。
Source: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334