HTMLスナップショットテスト
スナップショットテストで意図しないHTMLの変更を検出します
「HTMLスナップショットテスト」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
スナップショットテストとは
スナップショットテストでは、初回実行時にコンポーネントまたはページのレンダリング結果を記録し、その後の実行で新しい出力と保存済みのスナップショットを比較します。HTML 出力に変更があると、スナップショットを意図的に更新するまでテストは失敗します。
Jest スナップショットテスト
Jest の toMatchSnapshot() マッチャーは、値（HTML にレンダリングされた JSX を含む）をシリアライズし、保存済みのファイルと比較します。意図した変更が発生した場合は npx jest -u でスナップショットを更新します。テストが、意図しないレンダリング変更に対する回帰検知の網として機能します。
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Storybook Test Runner
Storybook Test Runner はすべてのストーリーを実行し、axe（アクセシビリティ）と DOM のシリアライズを使って出力のスナップショットを作成します。Chromatic と組み合わせると、DOM の差分に加えてピクセルレベルの差分も検出でき、ビジュアルリグレッションテストを追加できます。
Percy または Chromatic によるビジュアルリグレッション
Percy と Chromatic はレンダリングされたページを画像としてスナップショット化し、視覚的な差分を明らかにします。DOM スナップショットでは見逃す CSS のリグレッション（フォントの切り替え、マージンの微調整、色の変化など）を検出できます。DOM スナップショット（低コストで高速）とビジュアルスナップショット（高コストですが包括的）を組み合わせてください。
スナップショットのメンテナンス
「簡単に」変わりすぎるスナップショットはノイズになります。日付、id、ランダムなキーなど、安定しない値のスナップショット化は避けてください。実行ごとに正当に変化するフィールドには、Jest のプロパティマッチャー（expect.any(String)）を使用します。スナップショットは小さく、対象を絞って保守してください。
スナップショットのコードレビュー
プルリクエストに含まれるスナップショットファイルの差分は、重要なレビュー対象です。レビュー担当者は、DOM の変更が意図したもので歓迎すべきものかを確認できます。これにより、「単純な」CSS の変更による意図しない連鎖的な影響を検出できます。スナップショットの差分も、他の差分と同じように扱ってください。
何もかもスナップショットにしない
巨大なページ全体のレンダリングをスナップショットにするのは脆弱です。わずかな変更でも大きな差分に連鎖してしまいます。コンポーネント単位でスナップショットを作成してください。各 Button、各 Card、各 FormField を対象にします。ページ単位のレンダリングには、代わりにビジュアルリグレッションテストが適しています。
スナップショットのシリアライズ
シリアライズ方法を選択してください。完全な HTML、簡略化した DOM、props のみ、アクセシビリティツリーなどがあります。形式ごとに検出できるリグレッションが異なります。UI コンポーネントでは完全な HTML が最も網羅的です。props 駆動のロジックでは、props のみの形式のほうが低コストで、誤検知もほとんどありません。
スナップショットが壊れたとき
最も一般的な原因は、同等の結果を生成するものの、HTML の構造が異なるリファクタリングです。差分を確認してください。変更が意図したもので適切なら、スナップショットを更新します。予期しない変更なら、根本原因となっているコードを修正してください。確認せずに jest -u を盲目的に実行してはいけません。
クロスブラウザのスナップショット
ビジュアルリグレッションツールは複数のブラウザでレンダリングし、ブラウザ固有の差異を報告します。これを利用すると、Safari と Chrome で異なる表示になる CSS を検出できます。新しいレイアウト機能を初期導入段階で使う場合に、こうした問題はよく発生します。クロスブラウザのスナップショットがなければ、このようなリグレッションは手動 QA でしか発見できません。
他のテストとの組み合わせ
スナップショットテストは必要ですが、それだけで十分ではありません。意図しないレンダリングの変更は検出できますが、ロジックのバグ（ボタンをクリックすると正しい処理が行われるかどうか）は検出できません。動作にはユニットテスト、ユーザーフローにはエンドツーエンドテストを組み合わせてください。それぞれの層で異なる失敗を検出できます。
パフォーマンス
スナップショットテストは文字列やファイルを比較するため高速です。ビジュアルリグレッションテストは、ピクセルをレンダリングして画像を比較し、多くの場合は複数のブラウザでも実行するため、より低速です。スナップショットは CI のすべてのビルドで実行してください。ビジュアルリグレッションはすべての PR で実行しますが、CI の予算によってはすべてのコミットで実行する必要はありません。
知識チェック
DOM スナップショットテストは、なぜ通常 Percy や Chromatic のようなビジュアルリグレッションテストと組み合わせるのでしょうか。
まとめ
スナップショットテストは、初回実行時にレンダリングされた HTML を取得し、以降の実行で変更があると検出します。コンポーネントの DOM には Jest の toMatchSnapshot、ストーリーには Storybook Test Runner、ピクセル単位のビジュアルリグレッションには Percy/Chromatic を使用してください。スナップショットはページ単位ではなくコンポーネント単位で作成し、不安定な値を除外して、PR では差分を慎重に確認してください。完全なカバレッジのために、ユニットテストとエンドツーエンドテストも組み合わせます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「HTMLスナップショットテスト」レッスンは無料ですか？
はい。「HTMLスナップショットテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「HTMLスナップショットテスト」で何を学びますか？
スナップショットテストで意図しないHTMLの変更を検出します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「HTMLスナップショットテスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。