Jest如何測試Vuex的異步actions

要使用Jest測試Vuex的異步actions，你需要模擬Vuex store并確保你的actions能夠正確地處理異步操作。以下是一個基本的步驟指南：

1. 安裝必要的依賴項：確保你已經安裝了vuex、jest和@vue/test-utils。

2. 創建一個Vuex store：在你的Vuex store中定義你的異步action。

3. 編寫測試文件：使用Jest編寫一個測試文件來測試你的異步action。

4. 模擬API調用：在測試中模擬你的API調用，以便你可以控制它們的行為。

5. 斷言和解析Promise：在測試中使用async/await或.then()來等待異步action完成，并對結果進行斷言。

下面是一個簡單的例子，展示了如何測試一個異步的Vuex action：

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    items: []
  },
  mutations: {
    setItems(state, payload) {
      state.items = payload;
    }
  },
  actions: {
    fetchItems({ commit }) {
      return new Promise((resolve, reject) => {
        // 模擬API調用
        setTimeout(() => {
          const items = ['item1', 'item2'];
          commit('setItems', items);
          resolve(items);
        }, 1000);
      });
    }
  }
});

// store.test.js
import { createStore } from 'vuex';
import storeConfig from './store';

describe('Vuex Store', () => {
  let store;

  beforeEach(() => {
    store = createStore(storeConfig);
  });

  it('fetches items and commits "setItems" mutation', async () => {
    // 調用異步action
    await store.dispatch('fetchItems');

    // 斷言mutation是否被調用
    expect(store.state.items).toEqual(['item1', 'item2']);
  });
});

在這個例子中，我們創建了一個簡單的Vuex store，其中包含一個異步action fetchItems。這個action模擬了一個API調用，并在1秒后將結果提交到mutation setItems。

在測試文件中，我們使用async/await語法來等待fetchItems action完成。然后，我們斷言items狀態是否已經根據預期被更新。

請注意，這個例子使用了setTimeout來模擬異步行為，但在實際應用中，你可能會使用像axios這樣的HTTP客戶端來進行真實的API調用。在測試時，你可以使用jest.fn()來模擬這些調用，并返回預期的結果。