9.4 スナップショットの再取得と注意点

■ 要点まとめ

■ ✅ スナップショット再取得ステップ

  1. リファクタリング後にテストを実行

    → 当然、スナップショットエラーが出る（差分あり）

  2. エラー内容を確認する

    → +と-で追加・削除された差分を見る

  3. 意図通りの変更か確認する

    → もし意図しない変更なら、リファクタリングをやり直す

  4. 問題なければスナップショットを再取得する

    コマンド例：

    npm run test -- -u

    または

    yarn test -u

  5. gitに差分としてスナップショットファイル（.snap）をコミットする

■ ✅ 再取得が必要になる主なケース

変更箇所 理由
<script setup> に書き換えた コンパイル後のHTML構造が若干変わる場合がある
v-modelの実装が変わった value属性や@inputイベントが変わることがある
propsやemitの記述方法が変わった コンポーネント間のデータ連携に影響するため
コンポーザブル関数にまとめた コンポーネント構造は変わらなくても、副作用が影響する場合がある

■ ✅ 注意するべきポイント

項目 内容
差分チェックの重要性 単なるスナップショットエラーではなく、本当に意図した変更か目で確認
setup構成の違い クラスコンポーネントと比べるとHTMLレンダリング順が変わる場合がある
手動で書き換えないこと .snapファイルは必ずテストランナーで生成する（手で修正禁止）
テストが壊れていないか確認 スナップショット更新後も、ロジックテスト（ボタンクリック等）がすべて通ること