Come deridere localStorage.setIem e localStorage.removeItem in JEST

Question

quando provo a deridere il localStorage di un componente di reagire per scherzo come sotto,

spyOn(window.localStorage,'removeItem'); 
window.localStorage.removeItem("key1"); 
window.localStorage.removeItem("key2"); 
expect(window.localStorage.removeItem).toHaveBeenCalledWith("key1"); 
expect(window.localStorage.removeItem).toHaveBeenCalledWith("key2"); 

e utilizzato il codice qui sotto per localStorage beffardo

let localStorageMock = (function() { 
    var storage = {}; 

    return { 
    setItem: function(key, value) { 
     storage[key] = value || ''; 
    }, 
    getItem: function(key) { 
     return storage[key] || null; 
    }, 
    removeItem: function(key) { 
     delete storage[key]; 
    }, 
    get length() { 
     return Object.keys(storage).length; 
    }, 
    key: function(i) { 
     var keys = Object.keys(storage); 
     return keys[i] || null; 
    } 
    }; 
})(); 
Object.defineProperty(window, 'localStorage', { value: localStorageMock }); 

Answer 1

Ho eseguito questa operazione per l'archiviazione di sessione per il test del negozio aggiungendo un file di script dell'ambiente di installazione con quanto segue in;

Object.defineProperty(window, 'sessionStorage', { value: {}, writable: true });

Il file package.json cerca quindi simili;

"jest": { "setupEnvScriptFile": "jest/jest-setupEnvScriptFile.js",

Non sto davvero convinto avete bisogno di questo nella sua ultima versione di scherzo però ho usato questa configurazione dal momento che una versione molto prima.

Una cosa quando si utilizza questo approccio è necessario essere a conoscenza è che può persistere i dati tra i test in modo da aggiungere il seguente in beforeEach;

sessionStorage = {}; 

Answer 2

ho usato questo in package.json del mio progetto:

"jest": { 
    "setupFiles": ["<rootDir>/app/mock/localStorageMock.js"] 
}