时间戳

首页 > 解决方案 > 测试突变是否触发反应

vue.js - 测试突变是否触发反应

问题描述

我最近在使用 Vuex 时遇到了一个问题，结果证明是由突变引起的，没有触发反应性。我不确定如何在没有安装组件的情况下检测单元测试中是否触发了反应性。在不安装任何组件的情况下测试它的正确方法是什么？

标签： vue.jsvuex

解决方案

突变很容易测试，因为它们只是完全依赖于其参数的函数。一个技巧是：如果您使用 ES2015 模块并将您的变更放在您的 store.js 文件中，除了默认导出之外，您还必须将变更导出为命名导出。

然后要验证某些触发器是否已触发，您可以使用Sinon的间谍。

const state = { ... }

// export `mutations` as a named export
export const mutations = { ... }

export default new Vuex.Store({
  state,
  mutations
})

使用 Mocha 和 Chai 的示例测试（您也可以使用其他库）：

// mutations.js
export const mutations = {
  triggerMutation: state => state.doSth
}

和规范文件：

// mutations.spec.js
var chai = require('chai');
var sinon = require('sinon');
var sinonChai = require('sinon-chai');
var mutations = require('store');
var expect = chai.expect;
chai.use(sinonChai);

const { mutate } = mutations

describe('mutations', () => {
  it('Mutate should trigger', () => {
    // set up your spy
    var spy = sinon.spy();

    // apply the mutation
    mutate(spy);

    // assert result
    expect(spy).to.have.been.calledWith('triggerMutation');
  })
})

推荐阅读