Mengapa saya mendapat "TypeError: tidak boleh menukar nilai simbol kepada rentetan" apabila saya cuba mencipta klon kedai Vuex dalam ujian unit Jest?

Question

Saya mempunyai aplikasi Vue 2.6 / Vuex 3.6 / TypeScript yang berfungsi. Saya ingin menambah beberapa ujian unit sebelum melakukan beberapa pemfaktoran semula yang kompleks. Setelah saya memasang dan mengkonfigurasi Jest dan Uti Ujian Vue, saya cuba mengikut arahan yang diberikan dalam panduan Uti Ujian Vue rasmi.

Suaikan arahan kepada projek khusus saya, seperti ini:

import { createLocalVue } daripada '@vue/test-utils'
import Vuex daripada 'vue'
import kedai dari 'kedai'
import { cloneDeep } daripada 'lodash'

ujian("SET_CURRENT_VTK_INDEX_SLICES hendaklah mengemas kini kepingan indeks VTK", () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  kedai const = Vuex.Store baharu(cloneDeep(storeConfig))
  jangkakan(store.state.iIndexSlice).toBe(0)
  store.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis: 'i', value: 1 })
})

Tetapi apabila saya melaksanakan npm menjalankan ujian:unit

"TypeError: tidak boleh menukar nilai simbol kepada rentetan"

Saya tidak fikir terdapat sebarang simbol dalam kedai, tetapi gunakan fungsi rekursif untuk menyemak kedai dan semua anak-anaknya. (Saya mencuri kod ini dari tempat yang saya tidak ingat): 
function findSymbolInStore(store) {
      untuk (kunci const di kedai) {
        console.log(kunci);
        if (store.hasOwnProperty(key)) {
          nilai const = kedai[kunci];
          if (jenis nilai === 'objek') {
            if (nilai instanceof Symbol) {
              console.log(`Simbol ditemui: ${key}`);
            } lain {
              findSymbolInStore(nilai);
            }
          }
        }
      }
    }

 findSymbolInStore(store.state);

Tiada simbol ditemui dalam kedai.
Saya menemui beberapa lagi jalan buntu dan cuba merangkai kedai untuk melihat di mana simbol itu: 
cuba {
 const thisStore = JSON.stringify(store);
} tangkap (err) {
  console.error('Ralat menukar objek kepada rentetan;', err);
}

Tetapi ini menimbulkan ralat: 

Ralat jenis: menukar struktur gelung kepada JSON

Kemudian cuba rentetan dengan diratakan: 
import diratakan daripada 'diratakan';

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

Ini nampaknya membawa saya selangkah lebih jauh dan kini saya mendapat ralat: 

TypeError: Tidak dapat membaca sifat yang tidak ditentukan (baca 'iIndexSlice')

Ini adalah pelik kerana saya dapat melihat bahawa iIndexStore mempunyai nilai lalai 0 dalam kedai. Syukurlah, pada ketika ini Amit Patel membawa saya ke landasan yang betul dengan menunjukkan bahawa bukan sahaja iIndexSlice tidak ditentukan, tetapi keseluruhan store.state 
Saya terjumpa [isu Vuex GitHub][4] dengan ralat yang serupa dengan yang saya temui: 

[vuex] getter sepatutnya menjadi fungsi, tetapi 'getters.currentView' ialah {}

Dalam soalan yang dipetik di atas, pengarang mengesyorkan supaya tidak mengeksport kedai, tetapi hanya konfigurasi kedai. Saya menyedari bahawa kedai apl itu mengeksport contoh kedai sebenar. Definisi storan Vuex kelihatan seperti ini: 
const store = Vuex.Store baharu({
 nyatakan: {
  iIndexSlice: 0,
  // ...
 },
 pengambil: {
  currentView(state) {
   // Kod fungsi ...
  }
 mutasi: {
  // kod
 },
 tindakan: {
  // kod
 }
});

eksport kedai lalai;

Tetapi bagaimana sekarang? 
HT: Kepada Mujeeb, yang membantu saya dengan beberapa penyahpepijatan simbolik. 
 NOTA: Saya boleh melangkau jalan buntu dan lain-lain, tetapi saya fikir orang lain mungkin mengalami kesukaran yang sama dan mungkin lebih mudah untuk menggoogle jawapannya jika beberapa pepijat dll disebut. 
            

Answer 1

(Selamat datang ke episod lain "Dave menghabiskan terlalu banyak masa untuk menyelesaikan masalah ini...ia sangat remeh, tetapi diharapkan dapat menyelamatkan orang lain yang akan melakukan kesilapan yang sama":

Saya memfaktorkan semula kedai Vuex seperti ini:

export const storeConfig = {
 state: {
  iIndexSlice: 0,
  // ...
 },
 getters: {
  currentView(state) {
   // Function code ...
  }
 mutations: {
  // code
 },
 actions: {
  // code
 }
};

const store = new Vuex.Store(storeConfig);

export default store;

Kemudian saya hanya perlu membuat tweak kecil untuk ujian Jest:

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

Kini ujian berjalan tanpa masalah.