In Jest-Tests wird immer wieder "localStorage is not defined" angezeigt. Dies ist sinnvoll, aber welche Optionen stehen mir zur Verfügung? Ziegelmauern treffen.
144
Tolle Lösung von @chiedo
Wir verwenden jedoch die ES2015-Syntax und ich fand es etwas sauberer, sie so zu schreiben.
class LocalStorageMock {
constructor() {
this.store = {};
}
clear() {
this.store = {};
}
getItem(key) {
return this.store[key] || null;
}
setItem(key, value) {
this.store[key] = value.toString();
}
removeItem(key) {
delete this.store[key];
}
};
global.localStorage = new LocalStorageMock;
value + ''
im Setter tun , um null und undefinierte Werte korrekt zu behandeln|| null
deshalb schlug mein Test fehl, weil ich in meinem Test benutztenot.toBeDefined()
. @ Chiedo Lösung machen es wieder funktionierenIch habe es mit Hilfe davon herausgefunden: https://groups.google.com/forum/#!topic/jestjs/9EPhuNWVYTg
Richten Sie eine Datei mit folgendem Inhalt ein:
Anschließend fügen Sie Ihrer package.json unter Ihren Jest-Konfigurationen die folgende Zeile hinzu
"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",
quelle
"setupFiles": [...]
funktioniert auch. Ermöglicht mit der Array-Option das Trennen von Mocks in separate Dateien. ZB:"setupFiles": ["<rootDir>/__mocks__/localStorageMock.js"]
getItem
unterscheidet sich geringfügig von dem, der von einem Browser zurückgegeben wird, wenn für einen bestimmten Schlüssel keine Daten festgelegt werden. Ein Aufruf,getItem("foo")
wenn er nicht festgelegt ist, wird beispielsweisenull
in einem Browser zurückgegeben, aberundefined
durch dieses Modell hat dies dazu geführt, dass einer meiner Tests fehlgeschlagen ist. Eine einfache Lösung für mich war,store[key] || null
in diegetItem
Funktion zurückzukehrenlocalStorage['test'] = '123'; localStorage.getItem('test')
Bei Verwendung der Create-React-App wird in der Dokumentation eine einfachere und unkompliziertere Lösung erläutert .
Erstellen Sie dies
src/setupTests.js
und fügen Sie es ein:Tom Mertz Beitrag in einem Kommentar unten:
Sie können dann testen, ob die Funktionen Ihres localStorageMock verwendet werden, indem Sie Folgendes tun
innerhalb Ihrer Tests, wenn Sie sicherstellen wollten, dass es aufgerufen wurde. Überprüfen Sie https://facebook.github.io/jest/docs/en/mock-functions.html
quelle
localStorage
Sie in Ihrem Code verwenden. (Wenn Siecreate-react-app
alle automatischen Skripte verwenden, die es natürlich bereitstellt)expect(localStorage.getItem).toBeCalledWith('token')
oderexpect(localStorage.getItem.mock.calls.length).toBe(1)
innerhalb Ihrer Tests ausführen , wenn Sie sicherstellen möchten , dass es aufgerufen wurde. Überprüfen Sie facebook.github.io/jest/docs/en/mock-functions.htmllocalStorage
? Möchten Sie die Spione nicht nach jedem Test zurücksetzen, um ein "Überlaufen" in andere Tests zu verhindern?Derzeit (19. Oktober) kann localStorage nicht wie gewohnt und in den Dokumenten zum Erstellen und Reagieren von Apps verspottet oder ausspioniert werden. Dies ist auf Änderungen in jsdom zurückzuführen. Sie können darüber im Scherz und in jsdom lesen Issue Tracker .
Um dieses Problem zu umgehen, können Sie stattdessen den Prototyp ausspionieren:
quelle
jest.spyOn(window.localStorage.__proto__, 'setItem');
oder du nimmst einfach ein Scheinpaket wie dieses:
https://www.npmjs.com/package/jest-localstorage-mock
Es verwaltet nicht nur die Speicherfunktionalität, sondern ermöglicht Ihnen auch zu testen, ob der Speicher tatsächlich aufgerufen wurde.
quelle
Eine bessere Alternative, die
undefined
Werte verarbeitet (nicht vorhandentoString()
) und zurückgibt,null
wenn kein Wert vorhanden ist. Getestet mitreact
v15redux
undredux-auth-wrapper
quelle
removeItem
: developer.mozilla.org/en-US/docs/Web/API/Storage/removeItemWenn Sie nach einem Mock und nicht nach einem Stub suchen, ist hier die Lösung, die ich verwende:
Ich exportiere die Speicherelemente zur einfachen Initialisierung. IE Ich kann es leicht auf ein Objekt setzen
In den neueren Versionen von Jest + JSDom ist es nicht möglich, dies festzulegen, aber der lokale Speicher ist bereits verfügbar und Sie können ihn wie folgt ausspionieren:
quelle
Ich habe diese Lösung von Github gefunden
Sie können diesen Code in Ihre setupTests einfügen und er sollte einwandfrei funktionieren.
Ich habe es in einem Projekt mit Typoskript getestet.
quelle
Leider haben die Lösungen, die ich hier gefunden habe, bei mir nicht funktioniert.
Also habe ich mir Jest GitHub-Probleme angesehen und diesen Thread gefunden
Die am besten bewerteten Lösungen waren diese:
quelle
window
oder haben auch nichtStorage
definiert. Vielleicht ist es die ältere Version von Jest, die ich benutze.Wie in @ ck4 vorgeschlagen, enthält die Dokumentation eine klare Erklärung für die Verwendung
localStorage
im Scherz. Die Scheinfunktionen konnten jedoch keine der folgenden Funktionen ausführenlocalStorage
Methoden .Unten ist das detaillierte Beispiel meiner Reaktionskomponente, die abstrakte Methoden zum Schreiben und Lesen von Daten verwendet.
Error:
Fix:
In unter Mock - Funktion für Scherz (Pfad:
.jest/mocks/setUpStore.js
)Von hier aus wird auf das Snippet verwiesen
quelle
Hier wurden einige andere Antworten abgefragt, um sie für ein Projekt mit Typescript zu lösen. Ich habe einen LocalStorageMock wie folgt erstellt:
Dann habe ich eine LocalStorageWrapper-Klasse erstellt, die ich für den gesamten Zugriff auf den lokalen Speicher in der App verwende, anstatt direkt auf die globale lokale Speichervariable zuzugreifen. Es war einfach, den Mock für Tests in den Wrapper zu setzen.
quelle
Erstellen Sie ein
global
Modell und fügen Sie es dem Objekt hinzuquelle
Sie können diesen Ansatz verwenden, um Spott zu vermeiden.
quelle
Sie müssen den lokalen Speicher mit diesen Snippets verspotten
// localStorage.js
Und in der Scherzkonfiguration:
Fühlen Sie sich frei, etwas zu fragen.
quelle
Die folgende Lösung ist kompatibel zum Testen mit strengerer Maschinenschrift, ESLint, TSLint und Prettier config:
{ "proseWrap": "always", "semi": false, "singleQuote": true, "trailingComma": "es5" }
:HT / https://stackoverflow.com/a/51583401/101290 zum Aktualisieren von global.localStorage
quelle
Gehen Sie wie folgt vor, um dasselbe im Typoskript zu tun:
Richten Sie eine Datei mit folgendem Inhalt ein:
Anschließend fügen Sie Ihrer package.json unter Ihren Jest-Konfigurationen die folgende Zeile hinzu
"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",
Oder Sie importieren diese Datei in Ihren Testfall, in dem Sie den lokalen Speicher verspotten möchten.
quelle
Das hat bei mir funktioniert,
quelle