Jest測試Vuex Actions和Mutations

Jest 是一個流行的 JavaScript 測試框架，它可以用來測試 Vuex 的 actions 和 mutations。以下是如何使用 Jest 來測試 Vuex 的 actions 和 mutations 的基本步驟：

安裝 Jest

首先，你需要在你的項目中安裝 Jest 和 Vue Test Utils。這里假設你已經有了一個 Vue 項目，并且使用 npm 作為包管理器。

npm install --save-dev jest vue-test-utils

配置 Jest

在你的項目根目錄下創建一個 jest.config.js 文件，用于配置 Jest。

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  // 其他配置...
};

測試 Vuex Actions

假設你有一個 Vuex store，其中包含一個 action 和一個 mutation。

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

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

你可以使用 Jest 來測試 incrementAsync action。

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

// 創建一個新的 store 實例，以避免測試之間的干擾
function newStore() {
  return createStore(storeConfig);
}

describe('store actions', () => {
  it('incrementAsync', async () => {
    const store = newStore();
    // 調用 action
    await store.dispatch('incrementAsync');
    // 檢查 mutation 是否按預期工作
    expect(store.state.count).toBe(1);
  });
});

測試 Vuex Mutations

測試 mutations 通常更簡單，因為它們只是修改狀態。

// store.spec.js
// ...
describe('store mutations', () => {
  it('increment', () => {
    const store = newStore();
    // 提交 mutation
    store.commit('increment');
    // 檢查狀態是否按預期變化
    expect(store.state.count).toBe(1);
  });
});

運行測試

在 package.json 中添加一個測試腳本：

{
  "scripts": {
    "test": "jest"
  }
}

然后運行 npm test 來執行你的測試。

確保你的測試文件放在正確的位置，Jest 默認會查找 __tests__ 目錄或者任何以 .spec.js 或 .test.js 結尾的文件。

這些是使用 Jest 測試 Vuex actions 和 mutations 的基本步驟。在實際項目中，你可能還需要 mock 外部依賴，處理異步操作，或者測試更復雜的 store 邏輯。