如何模拟localStorage.setIem和localStorage.在JEST中removeItem

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

本文关键字：localStorage JEST removeItem setIem 模拟 何模拟      更新时间：2023-09-26

当我尝试在jest中模拟react组件的localStorage时，

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

并使用下面的代码来模拟localStorage 

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 });

我通过在;

中添加下面的设置环境脚本文件，为会话存储进行了存储测试

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

包。Json文件看起来像;

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

我实际上不相信你在最新版本的jest中需要这个，但是我从更早的版本开始就使用了这个设置。

使用此方法时需要注意的一件事是，它可以在测试之间持久化数据，因此您需要在beforeEach;

中添加以下内容
sessionStorage = {};

我在我的项目package.json中使用了这个:

"jest": {
  "setupFiles": ["<rootDir>/app/mock/localStorageMock.js"]
}
相关文章：