Ich bekomme immer "localStorage ist nicht definiert" in Jest Tests, die Sinn macht, aber was sind meine Optionen? Schlagen von Backsteinmauern.Wie gehe ich in Jest-Tests mit localStorage um?
Antwort
Figured es mit Hilfe aus dieser: https://groups.google.com/forum/#!topic/jestjs/9EPhuNWVYTg
Setup-Datei mit folgendem Inhalt:
var localStorageMock = (function() {
var store = {};
return {
getItem: function(key) {
return store[key];
},
setItem: function(key, value) {
store[key] = value.toString();
},
clear: function() {
store = {};
},
removeItem: function(key) {
delete store[key];
}
};
})();
Object.defineProperty(window, 'localStorage', { value: localStorageMock });
Sie dann die folgende Zeile in package.json hinzufügen unter Ihr Jest konfiguriert
"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",
Große Lösung von @chiedo
Allerdings verwenden wir ES2015 Syntax und ich spürte, es war ein wenig sauberes es auf diese Weise 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;
Sollte wahrscheinlich' value + '' 'in der Setter, um Null undefined Werte richtig zu behandeln – menehune23
Eine bessere Alternative, die undefined
Werte Griffe (nicht toString()
hat) und gibt null
, wenn der Wert nicht existiert. Getestet dies mit react
v15, redux
und redux-auth-wrapper
class LocalStorageMock {
constructor() {
this.store = {}
}
clear() {
this.store = {}
}
getItem(key) {
return this.store[key] || null
}
setItem(key, value) {
this.store[key] = value
}
removeItem(key) {
delete this.store[key]
}
}
global.localStorage = new LocalStorageMock
Dank Alexis Tyler für die Idee,' removeItem' hinzuzufügen: https: //developer.mozilla .org/de-DE/docs/Web/API/Speicher/removeItem – Dmitriy
Glauben Sie, dass null und undefined zu "null" und "undefined" führen müssen (literale Zeichenfolgen) – menehune23
oder Sie nur ein Mock-Paket wie diese nehmen:
https://www.npmjs.com/package/jest-localstorage-mock
es die Speicherfunktionalität nicht nur Griffe, sondern auch ermöglicht es Ihnen, testen, ob der Speicher wurde eigentlich gerufen.
Riffed einige andere Antworten hier, um es für ein Projekt mit Typescript zu lösen. Ich habe ein LocalStorageMock wie folgt aus:
export class LocalStorageMock {
private store = {}
clear() {
this.store = {}
}
getItem(key: string) {
return this.store[key] || null
}
setItem(key: string, value: string) {
this.store[key] = value
}
removeItem(key: string) {
delete this.store[key]
}
}
Dann habe ich eine LocalStorageWrapper Klasse, die ich für alle Zugriff auf einen lokalen Speicher in der App verwenden, anstatt direkt die globale lokale Speichervariable zugreifen. Es wurde leicht gemacht, den Mock im Wrapper für Tests zu setzen.
Wenn Sie create-react-app verwenden, gibt es eine einfachere und einfachere Lösung, die in der documentation erläutert wird.
erstellen src/setupTests.js
und setzen diese in ihm:
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
clear: jest.fn()
};
global.localStorage = localStorageMock;
Hi c4k! Könnten Sie bitte ein Beispiel geben, wie Sie das in Ihren Tests verwenden würden? – Dimo
Was meinst du? Sie müssen nichts in Ihren Tests initialisieren, es macht nur die 'localStorage', die Sie in Ihrem Code verwenden, frei. (wenn Sie 'create-react-app' und alle automatischen Skripte verwenden, die es natürlich bereitstellt) – c4k
- 1. Wie gehe ich mit der Serverantwort um, wenn ich die Synchronisierungsfunktion in backbone.js überschreibe
- 2. Wie gehe ich in dieser Situation mit der Speicherverwaltung um?
- 3. Wie gehe ich mit TODO-Kommentaren in VisualStudio 2010 um?
- 4. Wie gehe ich mit "Projektdateien" in meiner Qt-Anwendung um?
- 5. Wie gehe ich mit IEnumerable in F # um?
- 6. Wie gehe ich mit diesem Zeiger in getaddrinfo um?
- 7. Wie gehe ich mit rekursiven repr() in Python um?
- 8. Wie gehe ich mit großen Arrays in MongoDB um?
- 9. Wie gehe ich mit Punkten in MongoDB-Schlüsseln um?
- 10. Wie gehe ich mit animierten Modellen in Three.js um?
- 11. Wie gehe ich mit einem Datenrennen in OpenMP um?
- 12. Wie gehe ich mit optionalen XML-Attributen in VBA um?
- 13. Wie gehe ich elegant mit einer PasswordBox in WPF um?
- 14. Wie gehe ich mit den Testdaten in Junit um?
- 15. Wie gehe ich mit optionalen Parametern in Moose um?
- 16. Wie gehe ich mit lokalen Datei-Uploads in Elektron um?
- 17. Wie gehe ich mit asynchronen Operationen in Startup.Configure um?
- 18. Wie gehe ich mit benutzerdefinierten Fehlern global in Phoenix um?
- 19. Wie gehe ich mit Arrays mit Reflektion um
- 20. Wie gehe ich mit Drag & Drop im Designer um?
- 21. Wie gehe ich mit einem fehlgeschlagenen DllImport um?
- 22. Wie gehe ich von Formularaktionen mit JQuery UI Dialog um?
- 23. Wie gehe ich mit beschädigten git-Objektdateien um?
- 24. C# Ereignisse ohne Argumente. Wie gehe ich mit ihnen um?
- 25. Wie gehe ich mit dem Hochladen von Dateien um?
- 26. Wie gehe ich mit mehreren gemeinsamen Benutzeroberflächen um?
- 27. Wie gehe ich mit den Aktionen eines UIAlertControllers um?
- 28. Wie gehe ich mit dem LDAP Protokoll
- 29. Wie aktualisiere ich React localstorage?
- 30. mit localStorage in Backbone.js
Offenbar mit einem der Updates der Name dieser Parameter geändert und jetzt ist es "setupTestFrameworkScriptFile" –
' "Setupfiles" genannt: [...]' funktioniert auch. Mit der Array-Option können Mocks in separate Dateien aufgeteilt werden. Zum Beispiel: '" setupFiles ": ["/__ mocks __/localStorageMock.js "]' –
Stiggler
Der Rückgabewert von 'getItem' unterscheidet sich geringfügig von dem, was von einem Browser zurückgegeben würde, wenn die keine Daten für einen bestimmten Schlüssel festgelegt sind. ruft 'getItem (" foo ")' auf, wenn es nicht gesetzt ist, wird zum Beispiel "null" in einem Browser zurückgegeben, aber "undefiniert" durch diesen Mock - dies hat einen meiner Tests zum Scheitern gebracht.Eine einfache Lösung für mich war, 'store [key] || zurückzugeben null 'in der' getItem'-Funktion –