🎯 7.3 非同期処理 + Composition API のテスト例

（Promise・async/await を含む Composition API コンポーネントのテスト）

✅ 【要点】

• Composition API でも非同期処理（Promise / async/await）は普通に使う
• await を忘れるとテストが正しく動かない
• Vue の DOM更新待ちは await nextTick() が必要

→ Vuex の action や内部の async 関数をテストするときは必須知識。

🟢 【非同期 dispatch を呼ぶ Composition API コンポーネント】

<!-- AsyncCounter.vue -->
<template>
  <button @click="incrementAsync">+</button>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';

const store = useStore();

const incrementAsync = async () => {
  await store.dispatch('incrementAsync'); // ← 非同期 action
};
</script>

🟠 【Vuex の非同期 action の例】

// store/counter/actions.ts
export const actions = {
  async incrementAsync({ commit }: any) {
    await new Promise((resolve) => setTimeout(resolve, 500)); // 500ms 待つ
    commit('increment');
  },
};

🟣 【テスト時のポイント】

1. dispatch をモックして Promise を返す
2. await をつけてテストを正しく待つ
3. 必要なら nextTick も使う