Pourquoi est-ce que j'obtiens « TypeError : impossible de convertir la valeur du symbole en chaîne » lorsque j'essaie de créer un clone d'un magasin Vuex dans un test unitaire Jest ?

Question

J'ai une application Vue 2.6 / Vuex 3.6 / TypeScript fonctionnelle. Je souhaite ajouter quelques tests unitaires avant de procéder à une refactorisation complexe. Une fois Jest et Vue Test Utils installés et configurés, j'ai essayé de suivre les instructions fournies dans le guide officiel de Vue Test Utils.

Adapter les instructions à mon projet spécifique, comme ceci :

importer { createLocalVue } depuis '@vue/test-utils'
importer Vuex depuis 'vue'
importer un magasin depuis 'magasin'
importer { cloneDeep } depuis 'lodash'

test("SET_CURRENT_VTK_INDEX_SLICES devrait mettre à jour les tranches d'index VTK", () => {
  const localVue = créerLocalVue()
  localVue.use(Vuex)
  const store = nouveau Vuex.Store(cloneDeep(storeConfig))
  attendre(store.state.iIndexSlice).toBe(0)
  store.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis : 'i', valeur : 1 })
})
≪/pré>
Mais lorsque j'exécute npm run test:unit, j'obtiens l'erreur suivante : 

"TypeError : impossible de convertir la valeur du symbole en chaîne"

Je ne pense pas qu'il y ait de symboles dans le magasin, mais utilisez une fonction récursive pour vérifier le magasin et tous ses enfants. (J'ai volé ce code quelque part dont je ne me souviens pas) : 
function findSymbolInStore(store) {
      pour (clé const en magasin) {
        console.log(clé);
        if (store.hasOwnProperty(key)) {
          valeur const = magasin[clé] ;
          if (type de valeur === 'objet') {
            if (valeur instance du symbole) {
              console.log(`Symbole trouvé : ${key}`);
            } autre {
              findSymbolInStore(valeur);
            }
          }
        }
      }
    }

 findSymbolInStore(store.state);
≪/pré>
Aucun symbole trouvé dans le magasin.
Je me suis retrouvé dans quelques impasses supplémentaires et j'ai essayé de chaîner le magasin pour voir où se trouvaient les symboles : 
essayer {
 const thisStore = JSON.stringify(store);
} attraper (erreur) {
  console.error('Erreur lors de la conversion de l'objet en chaîne;', err);
}
≪/pré>
Mais cela renvoie l'erreur : 

Erreur de type : conversion de la structure de boucle en JSON

Essayez ensuite de stringifier avec flatted : 
importer aplati depuis 'flatted';

const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);
≪/pré>
Cela a semblé m'amener un peu plus loin et maintenant j'obtiens l'erreur : 

TypeError : Impossible de lire la propriété non définie (lire 'iIndexSlice')

C'est étrange car je peux voir que iIndexStore a une valeur par défaut de 0 dans le magasin. Heureusement, à ce stade, Amit Patel m'a mis sur la bonne voie en soulignant que non seulement iIndexSlice n'était pas défini, mais que l'ensemble de store.state 
Je suis tombé sur un [problème Vuex GitHub][4] avec une erreur similaire à celle que j'ai rencontrée : 

Les getters 
[vuex] devraient être des fonctions, mais 'getters.currentView' est {}

Dans la question citée ci-dessus, l'auteur recommande de ne pas exporter la boutique, mais uniquement la configuration de la boutique. J'ai réalisé que la boutique de l'application exportait une instance réelle de la boutique. La définition du stockage Vuex ressemble à ceci : 
const store = new Vuex.Store({
 État: {
  iIndexSlice : 0,
  //...
 },
 getteurs : {
  vue actuelle (état) {
   // Code de fonction...
  }
 mutation : {
  //code
 },
 Actions: {
  //code
 }
});

exporter le magasin par défaut ;
≪/pré>
Mais et maintenant ? 
HT : À Mujeeb, qui m'a aidé avec un débogage symbolique. 
 REMARQUE : j'aurais pu ignorer les impasses, etc., mais j'ai pensé que d'autres pourraient avoir la même difficulté et qu'il serait peut-être plus facile de rechercher la réponse sur Google si certains bugs, etc. étaient mentionnés. ≪/p >            

Answer 1

(Bienvenue dans un autre épisode de "Dave a passé trop de temps à résoudre ce problème... c'est très trivial, mais j'espère que ça sauvera une autre personne qui fera la même erreur" :

J'ai refactorisé la boutique Vuex comme ceci :

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

const store = new Vuex.Store(storeConfig);

export default store;

Ensuite, j'ai juste dû apporter une petite modification au test Jest :

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

Maintenant, le test se déroule sans problème.