🎯 5.3 非同期 Vuex action のテスト書き換え

（Composition API + Jest における Promise を返す action のテスト）

✅ 【要点】

• Vuex の actions は Promise を返すことが多い

• 非同期のため await でしっかり待つ必要がある

• Jest では

  ✅ async/await

  ✅ resolves / rejects

  を使ってテストする。

→ Composition API への書き換え後も、基本のテスト方針は変わらないが、

→ this.$store.dispatch → useStore().dispatch になる。

🟢 【非同期 action の例（Composition API + Vuex）】

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

🟠 【クラスコンポーネント時のテスト（Before）】

it('incrementAsync は increment を commit する (クラス版)', async () => {
  const commit = jest.fn();
  await actions.incrementAsync({ commit });
  expect(commit).toHaveBeenCalledWith('increment');
});

🟣 【Composition API 時のテスト（After）】

action の単体テストは基本的に変わらない👇

// tests/counter.actions.spec.ts
import { actions } from '@/store/counter/actions';

describe('counter actions (Composition API)', () => {
  it('incrementAsync は increment を commit する', async () => {
    const commit = jest.fn();                      // ← commit をモック
    await actions.incrementAsync({ commit });      // ← Promise が終わるまで待つ
    expect(commit).toHaveBeenCalledWith('increment');
  });
});