🎯 4.3 props / data / computed / methods のテスト

✅ 【要点】

クラスコンポーネントでも Vue 通常のテスト方法と同じで、

• props → @Prop で定義 → propsData で渡す
• data → クラスのプロパティ → wrapper.vm.プロパティ名
• computed → get で定義 → wrapper.vm.プロパティ名
• methods → クラスのメソッド → wrapper.vm.メソッド名()

型安全にできるのがクラスコンポーネントの強み。

🏗️ 【テスト対象：クラスコンポーネントのコード】

<!-- src/components/UserInfo.vue -->
<template>
  <div>
    <!-- propsのnameを表示 -->
    <p>User: {{ name }}</p>
    <!-- computedのupperNameを表示 -->
    <p>Upper Name: {{ upperName }}</p>
    <!-- greetメソッドをボタンクリックで実行 -->
    <button @click="greet">Greet</button>
    <!-- message（data）の表示 -->
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
// クラスコンポーネントのインポート
import { Vue, Component, Prop } from 'vue-property-decorator';

// @ComponentでクラスをVueコンポーネントとして定義
@Component
export default class UserInfo extends Vue {
  // props: 親から受け取るname、型はstring、デフォルトはGuest
  @Prop({ default: 'Guest' }) readonly name!: string;

  // data: クラスプロパティとしてmessageを定義
  message: string = '';

  // computed: nameを大文字にする
  get upperName(): string {
    return this.name.toUpperCase();
  }

  // methods: messageを書き換える
  greet(): void {
    this.message = `Hello, ${this.name}!`;
  }
}
</script>

🧪 【テストコード】

// tests/UserInfo.spec.ts
// UserInfo コンポーネントの各テストケース

// shallowMountをインポート
import { shallowMount } from '@vue/test-utils';
import UserInfo from '@/components/UserInfo.vue';

describe('UserInfo.vue', () => {
  // propsのテスト
  it('props.name を渡すと表示される', () => {
    // shallowMountで name = "Alice" を渡す
    const wrapper = shallowMount(UserInfo, {
      propsData: { name: 'Alice' },
    });
    // nameが表示されているか確認
    expect(wrapper.text()).toContain('User: Alice');
  });

  // dataのテスト
  it('初期データ message は空文字', () => {
    const wrapper = shallowMount(UserInfo);
    // wrapper.vm でインスタンスにアクセスして message を確認
    expect(wrapper.vm.message).toBe('');
  });

  // computedのテスト
  it('computed upperName は大文字になる', () => {
    const wrapper = shallowMount(UserInfo, {
      propsData: { name: 'Bob' },
    });
    // computedプロパティ upperName の結果を確認
    expect(wrapper.vm.upperName).toBe('BOB');
  });

  // methodsのテスト
  it('greet メソッドを呼ぶと message が変わる', () => {
    const wrapper = shallowMount(UserInfo, {
      propsData: { name: 'Charlie' },
    });
    // greetメソッドを呼び出す
    wrapper.vm.greet();
    // messageが更新されたか確認
    expect(wrapper.vm.message).toBe('Hello, Charlie!');
  });
});

🟢 【実行コマンド】

npx jest

🟡 【テスト実行結果】