【スナップショットテスト】

スナップショットテスト とは?

💡 「今の状態」を写真に撮って保存——変わっていたらすぐわかる。
📌 このページのポイント
スナップショットテストの流れ コンポーネント 出力を生成 初回実行 📄 .snap ファイル <Button> class="btn-primary" </Button> 変更後の実行 コンポーネント 出力を生成 比較 ✓ PASS 差分なし ✗ FAIL 差分あり 意図した変更なら更新 jest --updateSnapshot ⚠ 内容を確認せず更新すると回帰テストとしての意味が失われる
スナップショットテストのイメージ:出力を記録して差分を自動検知する
ひよこ ひよこ

スナップショットテストって、スクリーンショットを撮るテストなの?

ペンギン先生 ペンギン先生

画像を撮るわけじゃないよ。コンポーネントが出力するHTMLや、関数が返すJSONなどを「スナップショット」というテキストファイルに保存して比較するんだよ。

ひよこ ひよこ

最初のスナップショットはどうやって作るの?

ペンギン先生 ペンギン先生

Jestで `toMatchSnapshot()` を使うと、初回実行時に `.snap` ファイルが自動生成されるよ。その内容が「正解」として記録されるんだ。

ひよこ ひよこ

2回目以降はどうなるの?

ペンギン先生 ペンギン先生

出力が保存済みスナップショットと一致すればテスト通過、差分があれば失敗になるよ。意図した変更なら `--updateSnapshot` オプションでファイルを更新するんだ。

ひよこ ひよこ

うっかり毎回更新してたら意味なくなりそうだね?

ペンギン先生 ペンギン先生

鋭いね!差分を確認せずに更新するのは一番よくないパターンだよ。スナップショットテストの価値は「意図しない変更を検知すること」にあるから、更新前に必ず差分の内容を理解することが大事なんだ。

ひよこ ひよこ

どんなときに特に役立つの?

ペンギン先生 ペンギン先生

Reactなどのコンポーネント開発で、リファクタリング後も見た目が崩れていないか確認するのに便利だよ。また、APIレスポンスの形式が変わっていないかのチェックにも使えるんだ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「スナップショットテスト」って出てきたら「出力を丸ごと保存して変化を検知するテスト」と思えればだいたいOK!
📖 おまけ:英語の意味
「Snapshot Testing」 = スナップショットテスト
💬 Snapshot(スナップショット)は「瞬間を切り取った写真」という意味だよ。ある時点の出力を保存しておいて、あとで比較するのが由来なんだ。
← 用語集にもどる