How do I deal with localStorage in jest tests?

在使用Jest进行单元测试时，处理localStorage有几种常见的方法。因为localStorage是浏览器的API，而Jest运行在Node.js环境下，所以默认情况下是没有localStorage的。以下是处理这种情况的几种方法：

1. 使用Mock

最常见的方法是使用Jest的模拟功能（mocking）来创建一个假的localStorage。这样可以模拟出localStorage的行为，不需要依赖真实的浏览器环境。这种方式简单且控制性强，易于测试各种边界条件和错误处理。

示例代码:

javascript
// 在你的测试文件中设置mock
beforeAll(() => {
  global.localStorage = {
    getItem: jest.fn(),
    setItem: jest.fn(),
    removeItem: jest.fn(),
    clear: jest.fn()
  };
});

// 测试示例
test('should set item in localStorage', () => {
  const key = 'user';
  const value = 'John Doe';
  localStorage.setItem(key, value);
  expect(localStorage.setItem).toHaveBeenCalledWith(key, value);
});

2. 使用第三方库

有些第三方库如jest-localstorage-mock可以自动为你处理localStorage的模拟。这些库通常提供了完整的localStorage模拟，包括正确处理存储的数据和响应方法调用等。

如何使用:

首先，你需要安装这个库：

bash
npm install --save-dev jest-localstorage-mock

然后，在你的Jest配置文件中（例如jest.config.js）添加：

javascript
setupFiles: ["jest-localstorage-mock"]

示例代码:

javascript
// 现在无需手动mock，可以直接使用
test('should store the correct value in localStorage', () => {
  localStorage.setItem('info', 'test');
  expect(localStorage.setItem).toHaveBeenCalledWith('info', 'test');
  expect(localStorage.__STORE__['info']).toBe('test');
});

3. 重写全局对象

如果你不想使用其他库，你也可以通过简单地将localStorage添加到global对象中来模拟它。

示例代码:

javascript
global.localStorage = {
  getItem: function(key) {
    return this.store[key] || null;
  },
  setItem: function(key, value) {
    this.store[key] = value.toString();
  },
  removeItem: function(key) {
    delete this.store[key];
  },
  clear: function() {
    this.store = {};
  },
  store: {}
};

// 使用重写的localStorage进行测试
test('should retrieve the correct item from localStorage', () => {
  localStorage.setItem('theme', 'dark');
  expect(localStorage.getItem('theme')).toBe('dark');
});

总结

上面介绍了三种处理localStorage的方法，你可以根据自己的需求和测试环境的复杂性选择最适合的方法。Mock是最灵活的方法，而使用第三方库可以让代码更简洁、易于维护。