Question

谢谢你看看。

我正在尝试在我的Vuex支持的应用程序上运行自动化测试，并且无法诊断为什么在Mocha测试文件中提交变异会导致Vuex发出警告说我正在直接修改状态，即使它已被修改突变中。我使用Vuex来跟踪全局状态并根据全局状态呈现某些元素（例如，如果state.status === 'INITIAL'则显示buttonA，如果state.status === 'LOADING'则显示buttonB。）

例如，我有一个中央商店：state = { status: 'INITIAL' };

然后我有一个相应的突变：

'LOADING': (state) => {
    state.status = 'LOADING';
},

然后，如果我通过组件或商店操作正常提交更改，它可以正常工作：this.$store.commit('INITIAL');

但是，如果我尝试建立相同的Vuex存储并在Mocha测试文件中提交相同的更改，则会出现错误：

'[Vue warn]: Error in callback for watcher "function () { return this._data.$$state; }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

突变发生正确并且测试顺利通过，但它在突变设置时给出了这个警告：state.status = 'LOADING';

我已尝试将提交请求移至动作中，但这并未解决问题。我已经尝试更改声明商店/ Vue的位置，但这并没有解决问题。我已经尝试为商店设置strict: false，但这并没有解决问题，也没有隐藏它。

我不觉得我在做那些想要测试提交的异常，但我可能完全偏离基础。如果我需要提供更多信息，错误转储或示例回购，请告诉我。

谢谢！基思

Answer 1

我发现在我的代码中的其他地方，我正在创建一个全局Vuex商店。我后来在我的测试代码中实例化了另一个商店。测试代码有效，但Vuex商店的“官方”实例化注意到对象在其控制范围之外发生变化（因为第二个Vuex商店正在修改它）。

有关更多上下文，我有一个模块，counter.js：

const store = {
  count: 0
}
const mutations = {
  increment(state) {
    state.count++;
  }
}
export default {
  store,
  mutations
}

在我的store.js文件中

import counter from './store/modules/counter'
...
const store = new Vuex({
  modules: {
    counter
  }
})

在我的test.spec.js文件中

import counter from './store/modules/counter'
...
describe('something', () => {
  it('does something', () => {
    let store = new Vuex({
      modules: {
        counter
      }
    })
    store.commit('increment')
  })
})

当Vuex创建一个商店时，它不会复制store和mutations个对象，只是抓住传递给它的引用，设置适当的检查和其他钩子。这种情况在运行测试时会发生两次（或更多次）并导致错误抛出 - 尽管是在不同的范围内，因此Mocha不会将其标记为失败的测试。

Vuex + Mocha：在测试中提交突变会引发警告'不要改变vuex存储状态'

1 个答案: