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

【问题标题】：How to mock localStorage.setIem and localStorage.removeItem in JEST如何在 JEST 中模拟 localStorage.setIem 和 localStorage.removeItem
【发布时间】：2016-06-30 15:20:21
【问题描述】：

当我尝试像下面这样开玩笑地模拟一个 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 });

【问题讨论】：

您遇到了什么错误？
我没有收到任何错误信息，但是单元测试中没有涵盖这些行。

标签： javascript reactjs jestjs

【解决方案1】：

我已经通过添加具有以下内容的设置环境脚本文件来为存储测试进行会话存储；

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

package.json 文件如下所示；

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

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

使用这种方法时需要注意的一点是，它可以在测试之间持久化数据，因此您需要在 beforeEach 中添加以下内容；

sessionStorage = {};

【讨论】：

感谢您的回复，我也在package.json中添加了这个setupEnvScriptFile，但是单元测试中仍然没有涵盖React组件中的localStorage行。
谁能帮我解决上述问题，我尝试在其他网站上搜索，但找不到任何解决方案。
后来改为：setupTestFrameworkScriptFile

【解决方案2】：

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

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

【讨论】：