🎯 4.4 イベント発火のテスト

✅ 【要点】

Vueコンポーネントの**イベント発火（$emit）**は、

• wrapper.vm.$emit() → 手動で発火できる
• wrapper.emitted() → イベントが発火されたか確認できる
• trigger('click') → DOMイベントを発火できる

→ 主に 親子コンポーネントの通信（子→親） で使われる。

🏗️ 【テスト対象：イベントを発火するコンポーネント】

<!-- src/components/ChildButton.vue -->
<template>
  <!-- ボタンをクリックすると 'custom-event' を emit -->
  <button @click="sendEvent">Click Me</button>
</template>

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

@Component
export default class ChildButton extends Vue {
  // methods: 親にイベントを通知
  sendEvent(): void {
    this.$emit('custom-event', 'hello');
  }
}
</script>

🧪 【イベント発火のテストコード】

// tests/ChildButton.spec.ts
// ChildButton コンポーネントのイベント発火テスト

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

describe('ChildButton.vue', () => {
  // イベントが emit されるか確認
  it('クリックすると custom-event が発火する', () => {
    const wrapper = shallowMount(ChildButton);

    // ボタンをクリック（trigger で DOMイベント発火）
    wrapper.find('button').trigger('click');

    // emitted() で 'custom-event' が発火されたか確認
    expect(wrapper.emitted()).toHaveProperty('custom-event');

    // イベントの引数が 'hello' になっているか確認
    expect(wrapper.emitted('custom-event')![0]).toEqual(['hello']);
  });
});

🟢 【実行コマンド】

npx jest

🟡 【出力結果】

 PASS  tests/ChildButton.spec.ts
  ChildButton.vue
    ✓ クリックすると custom-event が発火する (4ms)