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

🎯 3.3 methods の確認 → setup 内の関数呼び出しとそのテスト

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

✅ 【要点】

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

• wrapper.vm.method名() で methods を直接呼び出していた。

Composition API では

• 関数（methods）は setup 内で定義
• vm から直接は触れない → イベント (trigger) を使って呼び出す。

→ テストは「DOM操作 → イベント発火」経由で書き換える必要がある。

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

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

<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;

  increment(): void {
    this.count += 1;
  }
}
</script>

🧪 テスト（Before）

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

describe('Counter.vue (クラスコンポーネント)', () => {
  it('increment メソッドを呼ぶと count が増える', () => {
    const wrapper = shallowMount(Counter);
    wrapper.vm.increment();                        // ← メソッドを直接呼び出し
    expect(wrapper.vm.count).toBe(1);               // ← countを直接確認
  });
});

🟠 【Composition API への書き換え】

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