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 逻辑。