如何模拟 localStorage 进行打字稿单元测试

Question

有没有办法用 Jest 模拟 localStorage？

我已经尝试了这个问题的许多答案，但是，正如我不断得到的那样，似乎没有一个答案适用于打字稿：

“ReferenceError：本地存储未定义”

我还尝试制作自己的模拟安装文件：

export const localStorageMock = {
  getItem: jest.fn().mockImplementation(() => ({
    data: ""
  })),

  removeItem: jest.fn().mockImplementation(() => ({
    data: ""
  })),
};

并像这样链接它：

jest.mock('localStorage', () => {
  return jest.fn().mockImplementation(() => localStorageMock);
});

有办法吗？我只需要对我想要测试的方法使用 getItem 和 removeItem 。

Answer 1

您可以像这样模拟本地存储：

const mockLocalStorage = (() => {
  let store = {} as Storage;

  return {
    getItem(key: string) {
      return store[key];
    },

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

    removeItem(key: string) {
      delete store[key];
    },

    clear() {
      store = {} as Storage;
    },
  };
})();

export default mockLocalStorage;

然后在您的测试文件中，您可以将mockLocalStorage设置为您要使用的本地存储，如下所示：

Object.defineProperty(window, "localStorage", {
  value: mockLocalStorage,
});

这可能不是最好的方法，但这是过去对我有用的方法。

Answer 2

您可以通过在

localStorage

对象上定义

windows

属性来简单地实现此目的。

localStorageMock.ts：

const localStorageMock = (() => {
  let store: { [key: string]: string } = {};

  return {
    getItem: (key: string) => store[key] || null,
    setItem: (key: string, value: string) => {
      store[key] = value.toString();
    }
  };
})();

Object.defineProperty(window, 'localStorage', {
  value: localStorageMock,
});

现在，在您的测试文件中，导入上述文件

localStorageMock.ts

并使用 Jest 的函数来模拟

localStorage

:

  import './localStorageMock.ts'; // Import the localStorage mock file

  it('should store value in localStorage', () => {
    // Use localStorage methods as usual
    localStorage.setItem('myKey', 'myValue');
    expect(localStorage.getItem('myKey')).toBe('myValue');
  });

Answer 3

什么对我有用：

  const setItemMock = jest.fn();
  
  Object.defineProperty(global, 'sessionStorage', {
      value: {
        setItem: setItemMock,
      },
    });

  insideThisFunctionHappensSettingToStorageThatItryToTest('toStorage');

  expect(setItemMock).toHaveBeenCalledWith(
    'myKey',
    'toStorage',
  );

  afterEach(() => {
   // not sure if it's neccesary
   jest.clearAllMocks();
  });