🎯 2.1 クラスコンポーネントでのテストの特徴（wrapper.vm 依存）

✅ 【要点】

Vue 2.7 の クラスコンポーネントでは、

• data

• computed

• methods

  がすべて this にまとまっている。

テスト側ではこの this が

✅ wrapper.vm としてアクセスできる。

→ wrapper.vm.プロパティ名 で内部状態や関数を直接確認できる

→ Composition API への書き換え時、この vm 依存部分が書き換え対象になる。

🟢 【クラスコンポーネントの典型的なテスト】

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

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

@Component
export default class Counter extends Vue {
  count: number = 0;

  get double(): number {
    return this.count * 2;
  }

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

🧪 【このクラスコンポーネントのテスト例】

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

describe('Counter.vue (クラスコンポーネント)', () => {
  it('初期 count は 0', () => {
    const wrapper = shallowMount(Counter);
    expect(wrapper.vm.count).toBe(0);                    // ← vm で直接アクセス
  });

  it('double computed は count の2倍', () => {
    const wrapper = shallowMount(Counter);
    wrapper.vm.count = 3;                                // ← vm を直接操作
    expect(wrapper.vm.double).toBe(6);                   // ← vm で computed を確認
  });

  it('increment メソッドで count が増える', () => {
    const wrapper = shallowMount(Counter);
    wrapper.vm.increment();                              // ← vm でメソッド呼び出し
    expect(wrapper.vm.count).toBe(1);                     // ← vm でデータ確認
  });
});

🟠 【wrapper.vm のここが特徴】