🎯 6.2 props の違いでスナップショットを撮り分ける

（Composition API における props 変更によるスナップショットテスト）

✅ 【要点】

• props によって表示が変わるコンポーネント の場合、
• 異なる props を渡したパターンごとにスナップショットを取る ことで
• 「意図した見た目の違い」を記録できる。

→ テスト時に propsData を変えて mount すれば、簡単に分けて確認できる。

🟢 【コンポーネント例】

<!-- Greeting.vue -->
<template>
  <p>Hello, {{ name }}!</p>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{ name: string }>();
</script>

🟠 【スナップショットの基本パターン】

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

describe('Greeting.vue (propsごとのスナップショット)', () => {
  it('name が Vue の場合', () => {
    const wrapper = shallowMount(Greeting, {
      propsData: { name: 'Vue' },
    });
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('name が TypeScript の場合', () => {
    const wrapper = shallowMount(Greeting, {
      propsData: { name: 'TypeScript' },
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
});

🟣 【複数パターンをループでまとめる（forEach パターン）】

describe('Greeting.vue (複数 props)', () => {
  const names = ['Vue', 'TypeScript', 'Jest'];

  names.forEach((name) => {
    it(`name が ${name} の場合`, () => {
      const wrapper = shallowMount(Greeting, {
        propsData: { name },
      });
      expect(wrapper.html()).toMatchSnapshot();
    });
  });
});

🟡 【スナップショットファイルの例】

exports[`Greeting.vue (複数 props) name が Vue の場合 1`] = `
<p>Hello, Vue!</p>
`;

exports[`Greeting.vue (複数 props) name が TypeScript の場合 1`] = `
<p>Hello, TypeScript!</p>
`;

exports[`Greeting.vue (複数 props) name が Jest の場合 1`] = `
<p>Hello, Jest!</p>
`;