Comment puis-je traiter avec localStorage dans les tests de plaisanterie?

Je continue à obtenir “localStorage n’est pas défini” dans les tests de Jest, ce qui est logique, mais quelles sont mes options? Frapper les murs de briques.

Excellente solution de @chiedo

Cependant, nous utilisons la syntaxe ES2015 et j’ai trouvé que c’était un peu plus propre de l’écrire de cette façon.

class LocalStorageMock { constructor() { this.store = {}; } clear() { this.store = {}; } getItem(key) { return this.store[key] || null; } setItem(key, value) { this.store[key] = value.toSsortingng(); } removeItem(key) { delete this.store[key]; } }; global.localStorage = new LocalStorageMock; 

Vous l’avez trouvé avec l’aide de ceci: https://groups.google.com/forum/#!topic/jestjs/9EPhuNWVYTg

Configurez un fichier avec le contenu suivant:

 var localStorageMock = (function() { var store = {}; return { getItem: function(key) { return store[key]; }, setItem: function(key, value) { store[key] = value.toSsortingng(); }, clear: function() { store = {}; }, removeItem: function(key) { delete store[key]; } }; })(); Object.defineProperty(window, 'localStorage', { value: localStorageMock }); 

Si vous utilisez create-react-app, il existe une solution plus simple et directe expliquée dans la documentation .

Créez src/setupTests.js et mettez-le dedans:

 const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), clear: jest.fn() }; global.localStorage = localStorageMock; 

Consortingbution de Tom Mertz dans un commentaire ci-dessous:

Vous pouvez ensuite tester que les fonctions de votre localStorageMock sont utilisées en faisant quelque chose comme:

 expect(localStorage.getItem).toBeCalledWith('token') // or expect(localStorage.getItem.mock.calls.length).toBe(1) 

à l’intérieur de vos tests si vous vouliez vous assurer qu’il était appelé. Consultez https://facebook.github.io/jest/docs/en/mock-functions.html

Une meilleure alternative qui gère les valeurs undefined (il n’y a pas de toSsortingng() ) et renvoie null si value n’existe pas. Testé avec react v15, redux et 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 

ou vous prenez juste un paquet simulé comme ceci:

https://www.npmjs.com/package/jest-localstorage-mock

Il gère non seulement la fonctionnalité de stockage, mais vous permet également de tester si le magasin a effectivement été appelé.

Riffé d’autres réponses ici pour le résoudre pour un projet avec Typescript. J’ai créé un LocalStorageMock comme ceci:

 export class LocalStorageMock { private store = {} clear() { this.store = {} } getItem(key: ssortingng) { return this.store[key] || null } setItem(key: ssortingng, value: ssortingng) { this.store[key] = value } removeItem(key: ssortingng) { delete this.store[key] } } 

Ensuite, j’ai créé une classe LocalStorageWrapper que j’utilise pour tout access au stockage local dans l’application au lieu d’accéder directement à la variable de stockage local global. Il est facile de définir la maquette dans le wrapper pour les tests.

En tant que @ ck4, la documentation suggérée explique clairement l’utilisation de localStorage dans une blague. Cependant, les fonctions de simulation ne pouvaient exécuter aucune des méthodes localStorage .

Vous trouverez ci-dessous l’exemple détaillé de mon composant react qui utilise des méthodes abstraites pour écrire et lire des données,

 //file: storage.js const key = 'ABC'; export function readFromStore (){ return JSON.parse(localStorage.getItem(key)); } export function saveToStore (value) { localStorage.setItem(key, JSON.ssortingngify(value)); } export default { readFromStore, saveToStore }; 

Erreur:

 TypeError: _setupLocalStorage2.default.setItem is not a function 

Réparer:
Ajouter ci-dessous la fonction de simulation pour le jest (chemin: .jest/mocks/setUpStore.js )

 let mockStorage = {}; module.exports = window.localStorage = { setItem: (key, val) => Object.assign(mockStorage, {[key]: val}), getItem: (key) => mockStorage[key], clear: () => mockStorage = {} }; 

L’extrait est référencé à partir d’ ici