我该如何处理的localStorage开玩笑测试？我该如何处理的localStorage开玩笑测试？

我不断收到开玩笑测试这是有道理的，但我有哪些选择“的localStorage没有定义”？ 击中砖墙。

Answer 1:

从大的解决方案@chiedo

但是，我们使用ES2015语法，我觉得这是一个有点清洁剂是这样写的。

 class LocalStorageMock { constructor() { this.store = {}; } clear() { this.store = {}; } getItem(key) { return this.store[key] || null; } setItem(key, value) { this.store[key] = value.toString(); } removeItem(key) { delete this.store[key]; } }; global.localStorage = new LocalStorageMock; 

Answer 2:

与此帮助想通了： https://groups.google.com/forum/#!topic/jestjs/9EPhuNWVYTg

安装具有以下内容的文件：

 var localStorageMock = (function() { var store = {}; return { getItem: function(key) { return store[key]; }, setItem: function(key, value) { store[key] = value.toString(); }, clear: function() { store = {}; }, removeItem: function(key) { delete store[key]; } }; })(); Object.defineProperty(window, 'localStorage', { value: localStorageMock }); 

然后，你将下面的行添加到您的package.json在你的玩笑CONFIGS

"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",

Answer 3:

如果使用创建反应的应用内，有一个更简单的和直接的解决方案中说明的文档 。

创建src/setupTests.js ，并把这个在它：

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

在下面评论汤姆·默茨的贡献：

然后，您可以测试你的localStorageMock的功能是通过执行类似使用

expect(localStorage.getItem).toBeCalledWith('token')
// or
expect(localStorage.getItem.mock.calls.length).toBe(1)

你的测试里面，如果你想确保它被调用。 退房https://facebook.github.io/jest/docs/en/mock-functions.html

Answer 4:

或者你只需​​要一个模拟软件包这样的：

https://www.npmjs.com/package/jest-localstorage-mock

它不仅可以处理存储功能，而且还可以让你测试，如果商店实际上是调用。

Answer 5:

它处理一个更好的选择undefined值（它不具有toString()并返回null ，如果值不存在。 与测试了这个react V15， redux和redux-auth-wrapper

class LocalStorageMock {
  constructor() {
    this.store = {}
  }

  clear() {
    this.store = {}
  }

  getItem(key) {
    return this.store[key] || null
  }

  setItem(key, value) {
    this.store[key] = value
  }

  removeItem(key) {
    delete this.store[key]
  }
}

global.localStorage = new LocalStorageMock

Answer 6:

目前（一月'19）的localStorage不能被嘲笑或窥探的玩笑，你平时会，并作为创建反应的应用程序内文档概述。 这是由于在jsdom所做的更改。 你可以在这里读到它https://github.com/facebook/jest/issues/6798这里https://github.com/jsdom/jsdom/issues/2318 。

作为一种变通方法，您可以窥视原型，而不是：

// does not work:
jest.spyOn(localStorage, "setItem");
localStorage.setItem = jest.fn();

// works:
jest.spyOn(window.localStorage.__proto__, 'setItem');
window.localStorage.__proto__.setItem = jest.fn();

// assertions as usual:
expect(localStorage.setItem).toHaveBeenCalled();

Answer 7:

正如@ CK4建议文件有明确的使用说明localStorage开玩笑。 然而，模拟职能未能执行任何的localStorage方法。

下面是我的具体例子发生反应组件，它使抽象方法用途写入和读取数据，

//file: storage.js
const key = 'ABC';
export function readFromStore (){
    return JSON.parse(localStorage.getItem(key));
}
export function saveToStore (value) {
    localStorage.setItem(key, JSON.stringify(value));
}

export default { readFromStore, saveToStore };

错误：

TypeError: _setupLocalStorage2.default.setItem is not a function

固定：
下面添加模拟功能笑话（路径： .jest/mocks/setUpStore.js ）

let mockStorage = {};

module.exports = window.localStorage = {
  setItem: (key, val) => Object.assign(mockStorage, {[key]: val}),
  getItem: (key) => mockStorage[key],
  clear: () => mockStorage = {}
};

段来自引用在这里

Answer 8:

Riffed了一些其他的答案在这里，以解决它与打字稿的项目。 我创造了这样的LocalStorageMock：

export class LocalStorageMock {

    private store = {}

    clear() {
        this.store = {}
    }

    getItem(key: string) {
        return this.store[key] || null
    }

    setItem(key: string, value: string) {
        this.store[key] = value
    }

    removeItem(key: string) {
        delete this.store[key]
    }
}

然后，我创建了我的应用程序中使用的所有接入到本地存储而不是直接访问全球的本地存储变量LocalStorageWrapper类。 让人容易设置模拟在包装做检查。

Answer 9:

如果你正在寻找一个模拟，而不是存根，这里是我使用的解决方案：

export const localStorageMock = {
   getItem: jest.fn().mockImplementation(key => localStorageItems[key]),
   setItem: jest.fn().mockImplementation((key, value) => {
       localStorageItems[key] = value;
   }),
   clear: jest.fn().mockImplementation(() => {
       localStorageItems = {};
   }),
   removeItem: jest.fn().mockImplementation((key) => {
       localStorageItems[key] = undefined;
   }),
};

export let localStorageItems = {}; // eslint-disable-line import/no-mutable-exports

我出口，方便初始化存储项目。 IE我可以很容易地将其设置为一个对象

开玩笑+ JSDom的新版本，不可能设置这一点，但localStorage的已经可用，您可以窥探它，它就像这样：

const setItemSpy = jest.spyOn(Object.getPrototypeOf(window.localStorage), 'setItem');

Answer 10:

下面的解决方案是与严格的打字稿测试兼容，ESLint，TSLint，更漂亮配置： { "proseWrap": "always", "semi": false, "singleQuote": true, "trailingComma": "es5" } ：

class LocalStorageMock {
  public store: {
    [key: string]: string
  }
  constructor() {
    this.store = {}
  }

  public clear() {
    this.store = {}
  }

  public getItem(key: string) {
    return this.store[key] || undefined
  }

  public setItem(key: string, value: string) {
    this.store[key] = value.toString()
  }

  public removeItem(key: string) {
    delete this.store[key]
  }
}
/* tslint:disable-next-line:no-any */
;(global as any).localStorage = new LocalStorageMock()

HT / https://stackoverflow.com/a/51583401/101290如何更新global.localStorage

文章来源: How do I deal with localStorage in jest tests?