为什么我会收到“TypeError:尝试在Jest单元测试中创建Vuex存储区的克隆时,无法将Symbol值转换为字符串”“?

y1aodyip  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(103)

我有一个正在运行的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时,我收到了以下错误:
"TypeError:无法将符号值转换为字符串"
我不认为存储中有任何符号,但使用了递归函数来检查存储和它的所有子对象。(我从某个地方偷来了这段代码,我记不起来了):

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] getter应为函数,但"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,他帮助我进行了一些符号调试。
注:我本可以跳过死胡同等,但我想别人可能会击中同样的硬停止和谷歌的答案可能会更容易,如果一些错误等被提及。

myss37ts

myss37ts1#

(欢迎收看下一集“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;

我只需要对我的笑话测试做一个小小的调整:

// import store from './store'
// to:
import { storeConfig } from './store'
})

现在测试运行没有问题。

相关问题