🎯 6.1 wrapper.vm が使えない時のスナップショット取得方法

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

✅ 【要点】

Composition API では

• ref や computed で宣言した値は wrapper.vm には存在しない
• → vm に依存したスナップショットテストができない

✅ そこで

→ wrapper.html() などを使って、実際の DOM 出力をスナップショットにする

→ DOM構造をそのまま写真（スナップショット）として保存するイメージ。

🟢 【クラスコンポーネント時のスナップショット】

// ❌ vm を直接確認できた
expect(wrapper.vm.double).toBe(6);
expect(wrapper.vm.count).toBe(3);
expect(wrapper.html()).toMatchSnapshot();

🟠 【Composition API での正しいスナップショット取得方法】

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

describe('Counter.vue (Composition API)', () => {
  it('初期表示のスナップショット', () => {
    const wrapper = shallowMount(Counter);
    expect(wrapper.html()).toMatchSnapshot(); // ← DOM 出力をスナップショット化
  });
});

🟣 【コンポーネント例】

<!-- Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

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

const count = ref(0);
const increment = () => {
  count.value += 1;
};
</script>