2 つの流儀と進める方向: 状態を見るか、やり取りを見るか
何をもって「通った」とするかで、テストが壊れるタイミングが変わります。状態検証と相互作用検証という 2 つの流儀と、どこから書き始めるかという方向の関係を扱います。
何をもって「通った」とするかで、テストが壊れるタイミングが変わります。状態検証と相互作用検証という 2 つの流儀と、どこから書き始めるかという方向の関係を扱います。
サイクルの 3 拍それぞれで、やってよいことといけないことを決めます。失敗を必ず目で見る理由と、Green へ渡るときの 3 つの実装戦略の使い分けを扱います。
テスト 3 層の第 2 層を書きます。story に play 関数を足して開閉の操作を検証し、Vitest アドオンで実ブラウザの上で実行します。a11y の違反をテストの失敗にする設定と、Chromatic で見た目の差分を検知する流れも扱います。
適用のコストが何に比例するかを整理し、割に合わない場面を条件として示します。全面適用と不採用の間にある選択も扱います。
テストを後から書く場合と先に書く場合で、出てくるテストの内容がどう変わるかを整理します。TDD と BDD と ATDD の区別、そしてカバレッジを上げる活動との違いを扱います。
テストを先に書くと設計がどう変わるかを、PHP と React の両方で追う全 14 章のガイド。Red-Green-Refactor のサイクル、テストダブルの 5 分類、テストが書きにくいコードの直し方から、レガシーコードへの後付けと TDD が効かない場面までを扱います。
テストを先に書いたときに、ドメインモデルの何が見えるようになるかを記述します。あわせて、テストからは決まらないものも同じ重みで扱います。
テストが書きにくいとき、それはコードの何を指しているのかを 5 つの型に分けます。型ごとに、テスト側で歪める対処と設計を直す対処を並べます。
Dummy・Stub・Spy・Mock・Fake の違いを、同じ 1 つの題材で依存を 5 通りに差し替えることで見ます。手書きのダブルを既定にし、ツールは近道として後に置きます。
DDD アーキテクチャのテスト戦略を解説。テストピラミッド (Unit / Integration / Feature) の考え方、ドメイン層を DB なしで高速にテストする利点、モックの最小限利用、Arrange-Act-Assert、日本語テストメソッド名、テストデータビルダーパターンをまとめます。
データベースもフレームワークも登場しない純粋なロジックで、サイクルを 1 周します。時間帯の重なり判定を題材に、境界条件を段階的に追い込む手順を扱います。
テストが無いコードに後からテストを入れる手順を扱います。継ぎ目の見つけ方と、現在の振る舞いを先に固定する特性テストを扱います。
カスタムフックへ切り出すかどうかを、テストの書きにくさから判断します。切り出さないという判断も同じ重みで扱います。
テスト 3 層の第 1 層を書きます。Vitest に jsdom の project を足し、React Testing Library と user-event で、ダイアログが開くこと、フォーカスが中へ移って外へ出ないこと、Esc キーと閉じるボタンで閉じることを確かめます。待ってから確かめる箇所と、jsdom では確かめられないことも整理します。
現在時刻・保存・通知という 3 つの境界を、テストから差し替えられる形にします。04 章で分類したダブルが、ここで具体的なクラスの形になります。
テスト 3 層の第 3 層を書きます。Vitest Browser Mode で本物のキー入力を送り、フォーカスの閉じ込めと閉じる遷移を確かめます。Playwright でページに組み込んだ状態を通しで確かめ、最後にどの検証をどの層に置くかを表にまとめます。
Base UI が付ける役割と名前を手がかりにすると、Tailwind CSS のクラスや要素の入れ子に触らずにテストが書けます。その理由と、表示用の計算を純粋関数へ切り出す設計、jsdom と Storybook と実ブラウザの 3 層の全体像を扱います。
利用者から見える振る舞いに対してテストを書きます。内部の状態やクラス名に依存したテストが、リファクタで落ちる様子を実際に見ます。
外側の受入テストを先に失敗させ、経路の全体を最小の実装で 1 本だけ貫きます。06 章とは逆向きの進め方になります。
08 章で形を決めた API を呼ぶ側を書きます。読み込み中と成功とエラーと空の 4 つの状態を、実装より先にテストで要求します。