🎯 6.3 DOM出力の差分を意識したスナップショット設計

（Composition API + Jest における適切なスナップショット設計）

✅ 【要点】

スナップショットは

• 「変更を検知したい部分」だけを撮る ことが大事。
• 全部を撮ると差分がわかりにくくなる → 必要最小限に絞るべき。

→ ✅ 「どこが変わったか」を明確にするために、

→ ✅ find() で絞って html() を撮る設計が基本。

🟢 【悪い例：撮りすぎて差分が見えない】

const wrapper = shallowMount(MyComponent);
expect(wrapper.html()).toMatchSnapshot(); // ← 全部撮ってしまう

→ 出力が大きいと、どこが変わったかすぐわからない

→ ちょっとした class 名の変更でも大量の差分が出てしまう。

🟠 【良い例：確認したい部分だけ絞る】

const wrapper = shallowMount(MyComponent);
expect(wrapper.find('p.message').html()).toMatchSnapshot();

→ 必要な <p class="message"> だけを撮る。

🟣 【実例：良いスナップショット設計】