如何在 Jest 中模拟 localStorage？
在前端开发中，我们经常需要对 localStorage 进行操作来存储一些数据。然而，在测试中我们需要模拟这个 API，以确保我们的代码可以与其它本地存储方式一同工作。在 Jest 中，我们可以使用 Jest 提供的 Mocking API 来模拟 localStorage。
localStorage 简介
localStorage 是 Web Storage API 的一部分，它允许我们在浏览器中存储和获取数据。使用 localStorage 的方法非常简单，只需要通过 setItem 和 getItem 方法即可存储和获取数据。例如：
localStorage.setItem('username', 'John Doe');
let username = localStorage.getItem('username');localStorage 的 API 比较简单，但是在测试中，我们需要模拟这个 API，以确保我们的代码可以正常工作。
Jest 中的 Mocking API
Jest 提供了 Mocking API，这个 API 可以用来模拟各种 JavaScript API，比如 localStorage、XMLHttpRequest、setTimeout 等等。使用 Mocking API 可以使我们在测试时，不用真正地去调用这些 API，而是通过模拟数据来测试我们的代码。
在 Jest 中，可以通过以下方式来模拟 localStorage：
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
clear: jest.fn()
};
global.localStorage = localStorageMock;该代码会定义一个 localStorageMock 对象，并将它赋值给 global.localStorage。然后，我们可以使用 Jest 提供的 fn() 方法来创建 mock 函数，并把它们赋值给 localStorageMock 对象中的方法。
上面的代码中，我们创建了 getItem、setItem、clear 三个方法的 mock 函数，并将它们赋值给 localStorageMock 对象中，然后将 localStorageMock 对象赋值给 global.localStorage。
示例代码
让我们看一个例子，假如我们有这样一个函数，它会从 localStorage 中获取数据：
function getDataFromLocalStorage(key) {
return localStorage.getItem(key);
}为了测试这个函数，我们需要模拟 localStorage。我们可以使用上面提到的 localStorageMock 对象来模拟 localStorage，然后调用该函数：
test('getDataFromLocalStorage function', () => {
const key = 'username';
const value = 'John Doe';
localStorage.getItem.mockReturnValue(value);
const result = getDataFromLocalStorage(key);
expect(result).toBe(value);
expect(localStorage.getItem).toHaveBeenCalledWith(key);
});该代码会使用 Mocking API 模拟 localStorage，并为 getItem 方法设置返回值。然后，我们调用 getDataFromLocalStorage 方法，并验证结果和 mock 函数是否被正确调用。
总结
使用 Jest 的 Mocking API，我们可以很容易地模拟 localStorage，在测试中对代码进行验证。模拟 localStorage 等 API，让我们可以在测试时不用真正地去调用它们。这种方式可以让我们更加专注于测试代码本身，而不是在测试时依赖于外部资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480556448841e9894fd01bd