Vue.js 单元测试更新 vuex 存储错误答案

【问题标题】：Vue.js unit testing updating vuex store errorVue.js 单元测试更新 vuex 存储错误
【发布时间】：2019-07-24 18:47:23
【问题描述】：

我在测试中使用 commit 更改 vuex 状态值，然后尝试查看应该基于更改呈现的元素是否存在。像这样的

it('should render error state if no stores', () => {
    wrapper.store.commit('stores/updateLoadingStores', false);
    wrapper.store.commit('stores/updateStores', []);
    expect(wrapper.find('error-state-stub').exists()).toBe(true);
});

相反，我收到下一个错误 ``` StoresStep › 如果没有商店，应该呈现错误状态

TypeError: Cannot read property '_isDestroyed' of undefined

  31 |     const mutationName = `${prefix}${_upperFirst(name)}`;
  32 |     acc[mutationName] = (state, value) => {
> 33 |       state[name] = value;
     |       ^
  34 |     };
  35 |     return acc;
  36 |   }, {});

  at destroy (node_modules/vue/dist/vue.runtime.common.dev.js:3151:28)
  at invokeDestroyHook (node_modules/vue/dist/vue.runtime.common.dev.js:6088:59)
 ...
```

它抱怨的函数是一个为特定模块设置值的包装器。查看实际错误 - TypeError: Cannot read property '_isDestroyed' of undefined 来自vue.runtime.common.dev.js

我认为它与 Vue.$nextTick() 相关，但似乎没有。

wrapper.store 部分只是我编写的实用程序，以便能够在一个地方安装组件并使用与其相关的所有内容。

将不胜感激。

【问题讨论】：

能否提供wrapper创建的代码？

标签： vue.js vuex vue-test-utils

【解决方案1】：

我终于想通了。问题并不明显。我不得不挖掘 vue.js 源代码以找到原始问题的线索。基本上，这个 vue-test-utils 问题部分解释了它 - https://github.com/vuejs/vue-test-utils/issues/52

最大的问题是错误根本没有将你链接到转换，所以我看错了方向。

而且解决方案很简单，只需 stub 转换 :)

VueTestUtils.config.stubs['transition'] = true;

【讨论】：