当我尝试在 Jest 单元测试中创建 Vuex 存储的克隆时，为什么会收到'TypeError：无法将符号值转换为字符串”？
P粉604848588
2023-08-26 16:06:50
<p>我有一个可用的 Vue 2.6 / Vuex 3.6 / TypeScript 应用程序。我想在进行一些复杂的重构之前添加一些单元测试。一旦我安装并配置了 Jest 和 Vue Test Utils，我就尝试按照官方 Vue Test Utils 指南中提供的说明进行操作。</p>
<p>根据我的具体项目调整说明，如下所示：</p>
<pre class="brush:js;toolbar:false;">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 })
})
</pre>
<p>但是当我执行 <code>npm run test:unit</code> 时，我收到以下错误：</p>
<blockquote>
<p>“类型错误：无法将符号值转换为字符串”</p>
</blockquote>
<p>我认为商店中没有任何符号，但使用递归函数来检查商店及其所有子项。 （我从不记得的地方窃取了这段代码）：</p>
<pre class="brush:js;toolbar:false;">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);
</pre>
<p>在商店中没有找到任何符号。</p>
<p>我又走了几个死胡同，尝试对商店进行字符串化以查看符号在哪里：</p>
<pre class="brush:js;toolbar:false;">try {
const thisStore = JSON.stringify(store);
} catch (err) {
console.error('Error converting object to string;', err);
}
</pre>
<p>但这引发了错误：</p>
<blockquote>
<p>类型错误：将循环结构转换为 JSON</p>
</blockquote>
<p>然后尝试使用 <code>flatted</code> 进行字符串化：</p>
<pre class="brush:js;toolbar:false;">import flatted from 'flatted';
const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);
</pre>
<p>这似乎让我更进一步，现在我收到了错误：</p>
<blockquote>
<p>类型错误：无法读取未定义的属性（读取“iIndexSlice”）</p>
</blockquote>
<p>这很奇怪，因为我可以看到 <code>iIndexStore</code> 在存储中的默认值为 0。值得庆幸的是，此时 Amit Patel 指出不仅 <code>iIndexSlice</code> 未定义，整个 <code>store.state</code> 也未定义，让我走上了正轨。</p>
<p>我偶然发现了一个 [Vuex GitHub 问题][4]，它与我遇到的错误有类似的错误：</p>
<blockquote>
<p>[vuex] getters 应该是函数，但“getters.currentView”是 {}</p>
</blockquote>
<p>在上述引用的问题中，作者建议不要导出商店，而仅导出商店的配置。我意识到应用程序的商店正在导出一个实际的商店实例。 Vuex 存储定义如下所示：</p>
<pre class="brush:js;toolbar:false;">const store = new Vuex.Store({
state: {
iIndexSlice: 0,
// ...
},
getters: {
currentView(state) {
// Function code ...
}
mutations: {
// code
},
actions: {
// code
}
});
export default store;
</pre>
<p>但是现在怎么办？</p>
<p>HT：致 Mujeeb，他帮助我进行了一些符号调试。</p>
<p>注意：我本可以跳过死胡同等，但我认为其他人可能会遇到同样的困难，如果提到一些错误等，那么在谷歌上搜索答案可能会更容易。</p >
（欢迎观看“戴夫花了太多时间来解决这个问题......这非常微不足道，但希望能拯救另一个会犯同样错误的人”的另一集：
我重构了 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' })现在测试运行没有问题。