我有一个工作的 Vue 2.6 / Vuex 3.6 / TypeScript 应用程序。我想在进行一些复杂的重构之前向它添加一些单元测试。一旦我安装并配置了 Jest 和 Vue Test Utils,我就尝试按照官方 Vue Test Utils 指南中的说明进行操作。
根据我的具体项目调整说明看起来像这样:
import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vue'
import store from 'store'
import { cloneDeep } from 'lodash'
test("SET_CURRENT_VTK_INDEX_SLICES should update the VTK index slices", () => {
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store(cloneDeep(storeConfig))
expect(store.state.iIndexSlice).toBe(0)
store.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis: 'i', value: 1 })
})
但是当我执行
npm run test:unit
时,我收到以下错误:
“类型错误:无法将符号值转换为字符串”
我不认为商店里有任何符号,而是使用递归函数来检查商店及其所有孩子。 (我从某个我不记得的地方窃取了这段代码):
function findSymbolInStore(store) {
for (const key in store) {
console.log(key);
if (store.hasOwnProperty(key)) {
const value = store[key];
if (typeof value === 'object') {
if (value instanceof Symbol) {
console.log(`Symbol found: ${key}`);
} else {
findSymbolInStore(value);
}
}
}
}
}
findSymbolInStore(store.state);
这在商店里没有找到任何符号。
我走到了其他几个死胡同,尝试将商店字符串化以查看符号在哪里:
try {
const thisStore = JSON.stringify(store);
} catch (err) {
console.error('Error converting object to string;', err);
}
但这引发了一个错误:
TypeError:将循环结构转换为 JSON
然后尝试使用
flatted
进行字符串化:
import flatted from 'flatted';
const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);
这似乎让我进步了一点,现在我得到了错误:
TypeError:无法读取未定义的属性(读取“iIndexSlice”)
这很奇怪,因为我可以看到
iIndexStore
在商店中的默认值为 0。值得庆幸的是,在这一点上,Amit Patel 指出不仅 iIndexSlice
未定义,整个 store.state
也未定义。
我偶然发现了一个 [Vuex GitHub 问题][4],它与我面临的错误类似:
[vuex] getters 应该是函数但是“getters.currentView”是{}
在上面提到的问题中,作者建议不要导出商店,而只导出商店的配置。我意识到该应用程序的商店正在导出一个实际的商店实例。 Vuex 商店定义看起来像这样:
const store = new Vuex.Store({
state: {
iIndexSlice: 0,
// ...
},
getters: {
currentView(state) {
// Function code ...
}
mutations: {
// code
},
actions: {
// code
}
});
export default store;
但是现在呢?
HT:致Mujeeb,他帮助我进行了一些符号调试。
注意:我本可以跳过死胡同等,但我认为其他人可能会遇到同样的困难,如果提到一些错误等,谷歌搜索答案可能会更容易。
(欢迎收看另一集“Dave 花了太多时间弄清楚这个……这很微不足道,但希望能拯救另一个会犯同样错误的人”):
我将 Vuex 商店重构为如下所示:
export const storeConfig = {
state: {
iIndexSlice: 0,
// ...
},
getters: {
currentView(state) {
// Function code ...
}
mutations: {
// code
},
actions: {
// code
}
};
const store = new Vuex.Store(storeConfig);
export default store;
然后我只需要对我的 Jest 测试进行一点小小的调整:
// import store from './store'
// to:
import { storeConfig } from './store'
})
现在测试运行没有问题。