當我嘗試在 Jest 單元測試中建立 Vuex 儲存的複製時，為什麼會收到「TypeError：無法將符號值轉換為字串」？

Question

我有一個可用的 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 } 從 '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，他幫我做了一些符號除錯。

注意：我本可以跳過死胡同等，但我認為其他人可能會遇到同樣的困難，如果提到一些錯誤等，那麼在谷歌上搜索答案可能會更容易。

Answer 1

（歡迎觀看「戴夫花了太多時間來解決這個問題......這非常微不足道，但希望能拯救另一個會犯同樣錯誤的人」的另一集：

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

現在測試運行沒有問題。