🎯 6.1 スナップショットテストとは？

✅ 【要点】

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

コンポーネントや関数の出力を「写真（スナップショット）」として保存し、

次回のテスト時にその「写真」と比較して、変更があったら教えてくれるテスト手法。

→ 「見た目が変わってない？」や「出力が変わってない？」を自動でチェックできる。

🖼️ 【イメージ】

1回目のテスト：

「このコンポーネントの HTML はこうだったよ」と保存。

2回目以降：

「今回の出力と前の写真（スナップショット）、同じ？」

→ 違ったらエラー！

🏗️ 【基本の書き方】

// 出力をスナップショットとして保存
expect(実際の出力).toMatchSnapshot();

🧪 【Vue コンポーネントのスナップショット例】

// tests/HelloWorld.spec.ts
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders correctly (スナップショット)', () => {
    const wrapper = shallowMount(HelloWorld, {
      propsData: { name: 'Vue' },
    });
    expect(wrapper.html()).toMatchSnapshot();  // ← スナップショットを作成
  });
});