How to mock localStorage.setIem and localStorage.removeItem in JEST

Question

when i try to mock the localStorage of a react component in jest as below,

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

and used the below code for localStorage mocking

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

I've done this for session storage for store testing by adding a setup environment script file with the following in;

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

The package.json file then looks like;

"jest": {
    "setupTestFrameworkScriptFile": "jest/jest-setupTestFrameworkScriptFile.js",
}

I'm not actually convinced you need this in the latest version of jest however I've used this setup since a much earlier version.

One thing when using this approach you need to be aware of is that it can persist data between tests so you'll want to add the following in the beforeEach;

sessionStorage = {};

Answer 2

I used this in my project's package.json:

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