Warum erhalte ich „TypeError: Symbolwert kann nicht in Zeichenfolge konvertiert werden“, wenn ich versuche, in einem Jest-Komponententest einen Klon eines Vuex-Stores zu erstellen?

Question

Ich habe eine funktionierende Vue 2.6 / Vuex 3.6 / TypeScript-Anwendung. Ich möchte einige Komponententests hinzufügen, bevor ich eine komplexe Umgestaltung durchführe. Nachdem ich Jest und Vue Test Utils installiert und konfiguriert hatte, versuchte ich, den Anweisungen im offiziellen Vue Test Utils-Handbuch zu folgen.

Passen Sie die Anweisungen wie folgt an mein spezifisches Projekt an:

import { createLocalVue } from '@vue/test-utils'
Vuex aus 'vue' importieren
Shop aus „Store“ importieren
importiere { cloneDeep } aus 'lodash'

test("SET_CURRENT_VTK_INDEX_SLICES sollte die VTK-Index-Slices aktualisieren", () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  const store = new Vuex.Store(cloneDeep(storeConfig))
  erwarten(store.state.iIndexSlice).toBe(0)
  store.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis: 'i', value: 1 })
})

Aber wenn ich npm run test:unit ausführe, erhalte ich die folgende Fehlermeldung:

"TypeError: Symbolwert kann nicht in String konvertiert werden"

Ich glaube nicht, dass der Speicher irgendwelche Symbole enthält, aber ich verwende eine rekursive Funktion, um den Speicher und alle seine untergeordneten Elemente zu überprüfen. (Ich habe diesen Code von irgendwoher gestohlen, an den ich mich nicht erinnere):

function findSymbolInStore(store) {
      for (const key in store) {
        console.log(key);
        if (store.hasOwnProperty(key)) {
          const value = store[key];
          if (typeof value === 'object') {
            if (Wertinstanz des Symbols) {
              console.log(`Symbol gefunden: ${key}`);
            } anders {
              findSymbolInStore(value);
            }
          }
        }
      }
    }

 findSymbolInStore(store.state);

Keine Symbole im Shop gefunden.

Ich bin in ein paar weitere Sackgassen geraten und habe versucht, den Laden mit Strings zu versehen, um zu sehen, wo sich die Symbole befanden:

try {
 const thisStore = JSON.stringify(store);
} Catch (Err) {
  console.error('Fehler beim Konvertieren des Objekts in einen String;', err);
}

Aber dies löst den Fehler aus:

Typfehler: Schleifenstruktur in JSON konvertieren

Versuchen Sie es dann mit der Stringifizierung mit flatted:

flatted from 'flatted' importieren;

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

Das schien mich einen Schritt weiter zu bringen und jetzt erhalte ich die Fehlermeldung:

TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „iIndexSlice“)

Das ist seltsam, weil ich sehe, dass iIndexStore einen Standardwert von 0 hat. Zum Glück brachte mich Amit Patel an diesem Punkt auf den richtigen Weg, indem er darauf hinwies, dass nicht nur iIndexSlice undefiniert war, sondern auch der gesamte store.state

Ich bin auf ein [Vuex GitHub-Problem][4] mit einem ähnlichen Fehler gestoßen wie der, auf den ich gestoßen bin:

[vuex] Getter sollten Funktionen sein, aber 'getters.currentView' ist {}

In der oben zitierten Frage empfiehlt der Autor, nicht den Store zu exportieren, sondern nur die Konfiguration des Stores. Mir wurde klar, dass der Store der App eine tatsächliche Store-Instanz exportierte. Die Vuex-Speicherdefinition sieht folgendermaßen aus:

const store = new Vuex.Store({
 Zustand: {
  iIndexSlice: 0,
  // ...
 },
 Getter: {
  currentView(state) {
   // Funktionscode ...
  }
 Mutationen: {
  // Code
 },
 Aktionen: {
  // Code
 }
});

Standardspeicher exportieren;

Aber was nun?

HT: An Mujeeb, der mir beim symbolischen Debuggen geholfen hat.

HINWEIS: Ich hätte die Sackgassen usw. überspringen können, aber ich dachte, andere hätten möglicherweise die gleichen Schwierigkeiten und es wäre möglicherweise einfacher, die Antwort zu googeln, wenn einige Fehler usw. erwähnt würden.

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'
})

现在测试运行没有问题。