🎯 6.3 コンポーネントに対するスナップショットテストの書き方

✅ 【要点】

Vueコンポーネントのスナップショットテストは、

wrapper.html() を toMatchSnapshot() で比較することで

「HTML（DOM構造）が変わっていないか？」をチェックするテスト。

→ props の違いによる表示内容の変化も確認できる。

🏗️ 【テスト対象のコンポーネント】

<!-- src/components/Greeting.vue -->
<template>
  <div>
    <p>Hello, {{ name }}!</p>
  </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 snapshot', () => {
  it('初期表示のスナップショットを取得する', () => {
    // shallowMountでコンポーネントを作成
    const wrapper = shallowMount(Greeting);
    // HTMLをスナップショットとして保存
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('props.name に "Vue" を渡した時のスナップショット', () => {
    const wrapper = shallowMount(Greeting, {
      propsData: { name: 'Vue' },
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
});

🟡 【1回目の実行】

npx jest

__snapshots__/Greeting.spec.ts.snap が自動生成される。

// Jest Snapshot v1

exports[`Greeting.vue snapshot 初期表示のスナップショットを取得する 1`] = `
<div>
  <p>Hello, World!</p>
</div>
`;

exports[`Greeting.vue snapshot props.name に "Vue" を渡した時のスナップショット 1`] = `
<div>
  <p>Hello, Vue!</p>
</div>
`;

🔥 【もしコンポーネントを修正して変わったら…】