🎯 6.2 toMatchSnapshot の基本的な使い方

✅ 【要点】

toMatchSnapshot は

「今の出力が前回のスナップショットと一致しているか？」 をチェックするための matcher（マッチャ）。

• コンポーネントの HTML

• オブジェクトや 関数の戻り値

  なんでも「そのときの結果」を保存して比較できる。

🖼️ 【基本の書き方】

expect(出力).toMatchSnapshot();

🏗️ 【Vue コンポーネントの基本例】

📂 テスト対象のコンポーネント

<!-- src/components/Greeting.vue -->
<template>
  <div>Hello, {{ name }}!</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class Greeting extends Vue {
  @Prop({ default: 'World' }) readonly name!: string;
}
</script>

📂 テストコード

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

describe('Greeting.vue', () => {
  it('renders correctly (スナップショット)', () => {
    // shallowMountでコンポーネントを作成
    const wrapper = shallowMount(Greeting, {
      propsData: { name: 'Vue' },
    });
    // スナップショットを取得して比較
    expect(wrapper.html()).toMatchSnapshot();
  });
});

🟢 【1回目実行時のコマンド】

npx jest