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.