javascript - How to mock localStorage.setIem and localStorage.removeItem in JEST - Stack Overflow

admin管理员组

文章数量:1410689

when i try to mock the localStorage of a react ponent 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 });

when i try to mock the localStorage of a react ponent 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 });

• javascript
• reactjs
• jestjs

Share Follow edited Sep 5, 2017 at 9:21 Blackus 7,22355 gold badges4242 silver badges5252 bronze badges asked Jun 30, 2016 at 15:20 NithilaNithila 31311 gold badge77 silver badges1919 bronze badges 2

• What is the error you're getting? – jhhoff02 Commented Jun 30, 2016 at 15:24
• I didn't get any error message, but the lines are not covered in unit testing. – Nithila Commented Jun 30, 2016 at 15:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 = {};

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

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

本文标签： javascriptHow to mock localStoragesetIem and localStorageremoveItem in JESTStack Overflow