（wrapper.vm 依存のテストを書き換える方法）

🎯 3.2 data の確認 → どう書き換えるべきか？

（wrapper.vm 依存のテストを書き換える方法）

✅ 【要点】

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

• wrapper.vm.プロパティ = 値 で data の中身を書き換えてテストできた。

Composition API では

• data は ref や reactive の中
• wrapper.vm には直接出てこない
• → テスト時は「props で渡す」か「ユーザー操作（イベント）」で変える。

🟢 【クラスコンポーネント時のコード】

🎯 コンポーネント（クラス）

<template>
  <p>{{ count }}</p>
</template>

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

@Component
export default class Counter extends Vue {
  count: number = 0;
}
</script>

🧪 テスト（Before）

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

describe('Counter.vue (クラスコンポーネント)', () => {
  it('count を書き換えて確認する', () => {
    const wrapper = shallowMount(Counter);
    wrapper.vm.count = 5;                     // ← dataを書き換え
    expect(wrapper.vm.count).toBe(5);         // ← vmで確認
  });
});

🟠 【Composition API への書き換え】

🎯 コンポーネント（Composition API）