🎯 7.4 スナップショットテストの書き換え例

（Vue 2.7 クラスコンポーネント → Composition API 書き換え実例）

✅ 【要点】

• クラスコンポーネントでは

  → wrapper.vm の状態を見ながら html() をスナップショット

• Composition API では

  → wrapper.vm に data, computed, methods が存在しない

  → スナップショットは必ず wrapper.html() か wrapper.find().html() で DOM 出力から取る。

→ 「見た目」に注目したスナップショット設計に変わる。

🟢 【移行前（クラスコンポーネント時のスナップショット）】

<template>
  <p>{{ message }}</p>
</template>

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

@Component
export default class Message extends Vue {
  message: string = 'Hello, Vue!';
}
</script>

🧪 クラスコンポーネントのテスト

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

describe('Message.vue (クラス)', () => {
  it('初期スナップショット', () => {
    const wrapper = shallowMount(Message);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

🟠 【移行後（Composition API）】

<template>
  <p>{{ message }}</p>
</template>

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

const message = ref('Hello, Vue!');
</script>

🟣 【テスト書き換え後】

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

describe('Message.vue (Composition API)', () => {
  it('初期スナップショット', () => {
    const wrapper = shallowMount(Message);
    expect(wrapper.html()).toMatchSnapshot(); // ← 書き方は同じ、内部は違う
  });
});

→ 表面の書き方は変わらないが、vm を使わず html() に依存するのが重要な違い。