Jest 测试时如何 mock localStorage？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要使用浏览器自带的本地存储（localStorage）来保存用户数据。在进行单元测试时，由于测试并不会在浏览器环境中运行，所以需要使用 Jest 的 mock 功能模拟 localStorage 的行为，以便进行有效的测试。

什么是 mock？

在 Jest 中，mock 是指模拟某个模块的行为，使得我们可以在测试代码中模拟一些外部依赖，如浏览器 API、服务器 API 等，从而进行更加控制和有效的测试。mock 通常可以分为手动 mock 和自动 mock 两种类型，手动 mock 指的是通过手动编写模拟代码实现的，而自动 mock 则是 Jest 自动为我们生成的模拟代码。

如何 mock localStorage？

在 Jest 中，我们可以通过手动 mock 来模拟 localStorage 的行为，也可以通过 Jest 提供的自动 mock 功能自动生成 localStorage 的模拟代码。下面我们将介绍两种方法的实现细节和具体操作步骤。

手动 mock localStorage

手动 mock localStorage 的方法比较简单，我们只需要编写一个模拟的 localStorage 对象，然后将其赋值给全局的 window 对象即可。具体操作步骤如下：

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

global.localStorage = localStorageMock;

上述代码中，我们定义了一个名为 localStorageMock 的对象，其中包含了 getItem、setItem 和 clear 三个方法。可以通过调用这些方法来模拟 localStorage 的行为。接着，我们将这个对象赋值给全局的 window.localStorage，从而实现了 localStorage 的手动 mock。

自动 mock localStorage

在 Jest 中，我们还可以使用一种更加简便的方法来模拟 localStorage，即 Jest 提供的自动 mock 功能。

首先，在我们的测试代码中引入 localStorage：

import localStorage from './__mocks__/localStorage';

// ... 测试代码

然后，在测试文件所在的目录下新建一个名为 mocks 的文件夹，在该文件夹下创建一个名为 localStorage.js 的文件，内容如下：

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

export default localStorageMock;

这里我们定义了一个名为 localStorageMock 的对象，其中包含了 getItem、setItem、removeItem 和 clear 四个方法。这些方法实际上什么都不做，只是使用 Jest 的 mock 功能模拟了 localStorage 的行为。最后，将其导出到测试代码中即可。

总结

Mock 是前端测试中非常重要的概念，能够帮助我们模拟各种外部依赖以进行更加有效的测试。在 Jest 中，mock 的实现非常简单，我们可以手动编写模拟代码，也可以使用 Jest 自动 mock 生成模拟代码。对于 localStorage 这类浏览器 API，我们可以通过这些方法轻松实现其 mock，从而使得我们的前端单元测试变得更加可靠和稳定。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647b2105968c7c53b06b07c0