在我的例子中，我需要在检查localStorage值之前设置它。

我所做的就是

const data = { .......}

const setLocalStorageValue = (name: string, value: any) => {
  localStorage.setItem(name, JSON.stringify(value))
}



 describe('Check X class', () => {
  setLocalStorageValue('Xname', data)
  const xClass= new XClass()

  console.log(xClass.initiate()) ; // it will work 

  
})

正如@ck4所建议的那样，文档已经清楚地解释了如何使用localStorage。然而，模拟函数无法执行任何localStorage方法。

下面是我的react组件的详细示例，它使用抽象方法来写入和读取数据，

//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添加以下mock函数(路径:.jest/mocks/setUpStore.js)

let mockStorage = {};

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

Snippet从这里引用

上面的答案对我都没用。经过一番挖掘，这就是我要做的。这要归功于一些来源和其他答案。

https://www.codeblocq.com/2021/01/Jest-Mock-Local-Storage/ https://github.com/facebook/jest/issues/6798#issuecomment-440988627 https://gist.github.com/mayank23/7b994385eb030f1efb7075c4f1f6ac4c https://github.com/facebook/jest/issues/6798#issuecomment-514266034

我的全部要点:https://gist.github.com/ar-to/01fa07f2c03e7c1b2cfe6b8c612d4c6b

/**
 * Build Local Storage object
 * @see https://www.codeblocq.com/2021/01/Jest-Mock-Local-Storage/ for source
 * @see https://stackoverflow.com/a/32911774/9270352 for source
 * @returns
 */
export const fakeLocalStorage = () => {
  let store: { [key: string]: string } = {}

  return {
    getItem: function (key: string) {
      return store[key] || null
    },
    setItem: function (key: string, value: string) {
      store[key] = value.toString()
    },
    removeItem: function (key: string) {
      delete store[key]
    },
    clear: function () {
      store = {}
    },
  }
}

/**
 * Mock window properties for testing
 * @see https://gist.github.com/mayank23/7b994385eb030f1efb7075c4f1f6ac4c for source
 * @see https://github.com/facebook/jest/issues/6798#issuecomment-514266034 for sample implementation
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window#properties for window properties
 * @param { string } property window property string but set to any due to some warnings
 * @param { Object } value for property
 *
 * @example
 *
 *  const testLS = {
 *    id: 5,
 *    name: 'My Test',
 *  }
 * mockWindowProperty('localStorage', fakeLocalStorage())
 * window.localStorage.setItem('currentPage', JSON.stringify(testLS))
 *
 */
const mockWindowProperty = (property: string | any, value: any) => {
  const { [property]: originalProperty } = window
  delete window[property]
  beforeAll(() => {
    Object.defineProperty(window, property, {
      configurable: true,
      writable: true,
      value,
    })
  })
  afterAll(() => {
    window[property] = originalProperty
  })
}

export default mockWindowProperty

Object.defineProperty(window, "localStorage", {
  value: {
    getItem: jest.fn(),
    setItem: jest.fn(),
    removeItem: jest.fn(),
  },
});

or

jest.spyOn(Object.getPrototypeOf(localStorage), "getItem");
jest.spyOn(Object.getPrototypeOf(localStorage), "setItem");

如果使用create-react-app，文档中解释了一个更简单和直接的解决方案。

创建src/setupTests.js，并把这个放在里面:

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

Tom Mertz的评论如下:

然后，您可以通过执行以下操作来测试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

你可以使用这种方法来避免嘲笑。

Storage.prototype.getItem = jest.fn(() => expectedPayload);