Jest 测试中遇到的 mock localStorage 问题及解决方式

在前端开发中，我们常常会用到 localStorage 来存储一些数据。在进行 Jest 测试时，我们可能会遇到需要 mock localStorage 的情况。然而，mock localStorage 并不是一件容易的事情，因为 Jest 默认是使用 JSDOM 来模拟浏览器环境，而 JSDOM 并没有实现 localStorage。本文将介绍在 Jest 测试中遇到的 mock localStorage 问题及解决方式。

问题描述

我们先来看一个例子，假设我们有一个 localStorageUtil.js 文件，其中包含了一些操作 localStorage 的方法：

export function setItem(key, value) {
  localStorage.setItem(key, value);
}

export function getItem(key) {
  return localStorage.getItem(key);
}

我们想要测试这些方法，于是我们写了如下的测试：

import { setItem, getItem } from './localStorageUtil';

describe('localStorageUtil', () => {
  it('setItem should set the value to localStorage', () => {
    setItem('testKey', 'testValue');
    expect(localStorage.getItem('testKey')).toBe('testValue');
  });

  it('getItem should get the value from localStorage', () => {
    localStorage.setItem('testKey', 'testValue');
    expect(getItem('testKey')).toBe('testValue');
  });
});

然而，当我们运行测试时，会遇到如下的错误：

TypeError: Cannot read property 'getItem' of undefined

这是因为 JSDOM 并没有实现 localStorage，而 localStorage 只在浏览器环境中可用。因此，我们需要 mock localStorage。

解决方式

方案一：使用 jest-localstorage-mock

jest-localstorage-mock 是一个 Jest 的插件，它可以帮助我们 mock localStorage。我们可以通过安装 jest-localstorage-mock 来解决问题：

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

然后在测试文件中使用如下代码引入：

import 'jest-localstorage-mock';

这样，在测试中就可以直接使用 localStorage 了。我们修改一下测试文件：

import { setItem, getItem } from './localStorageUtil';

describe('localStorageUtil', () => {
  it('setItem should set the value to localStorage', () => {
    setItem('testKey', 'testValue');
    expect(localStorage.getItem('testKey')).toBe('testValue');
  });

  it('getItem should get the value from localStorage', () => {
    localStorage.setItem('testKey', 'testValue');
    expect(getItem('testKey')).toBe('testValue');
  });
});

这次测试就会通过了。

方案二：手动 mock localStorage

如果你不想使用 jest-localstorage-mock 插件，也可以手动 mock localStorage。我们可以在测试文件中添加如下代码：

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

这样，我们就手动 mock 了 localStorage，可以在测试中使用了。我们修改一下测试文件：

import { setItem, getItem } from './localStorageUtil';

describe('localStorageUtil', () => {
  it('setItem should set the value to localStorage', () => {
    setItem('testKey', 'testValue');
    expect(localStorage.setItem).toHaveBeenCalledWith('testKey', 'testValue');
  });

  it('getItem should get the value from localStorage', () => {
    localStorage.getItem.mockReturnValueOnce('testValue');
    expect(getItem('testKey')).toBe('testValue');
  });
});

这次测试也会通过了。

总结

在 Jest 测试中，mock localStorage 是一个常见的问题。我们可以使用 jest-localstorage-mock 插件或手动 mock localStorage 来解决这个问题。如果你有更好的解决方案，欢迎在评论区留言分享。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb9385add4f0e0ff46e483