当我尝试在 Jest 单元测试中创建 Vuex 存储的克隆时,为什么会收到“TypeError:无法将符号值转换为字符串”?
P粉604848588
P粉604848588 2023-08-26 16:06:50
[Vue.js讨论组]

我有一个可用的 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);
}

但这引发了错误:

类型错误:将循环结构转换为 JSON

然后尝试使用 flatted 进行字符串化:

import flatted from 'flatted';

const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);

这似乎让我更进一步,现在我收到了错误:

类型错误:无法读取未定义的属性(读取“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,他帮助我进行了一些符号调试。

注意:我本可以跳过死胡同等,但我认为其他人可能会遇到同样的困难,如果提到一些错误等,那么在谷歌上搜索答案可能会更容易。

P粉604848588
P粉604848588

全部回复(1)
P粉421119778

(欢迎观看“戴夫花了太多时间来解决这个问题......这非常微不足道,但希望能拯救另一个会犯同样错误的人”的另一集:

我重构了 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'
})

现在测试运行没有问题。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号