Wie gehe ich in Jest-Tests mit localStorage um?

Question

Ich bekomme immer "localStorage ist nicht definiert" in Jest Tests, die Sinn macht, aber was sind meine Optionen? Schlagen von Backsteinmauern.

Answer 1

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",

Answer 2

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;

Answer 3

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 

Answer 4

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.

Answer 5

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.

Answer 6

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;