前言
在前端开发过程中，我们经常使用 LocalStorage 来存储一些数据，例如用户的登录信息，用户的偏好设置等等。但是在进行单元测试时，我们可能会遇到问题，因为 LocalStorage 是浏览器环境提供的对象，而不是 Jest 测试环境中提供的对象，所以在测试时无法真正地测试 LocalStorage 中存储的数据，这时我们就需要在 Jest 中模拟 LocalStorage 。
模拟 localStorage
首先，让我们梳理一下 LocalStorage 的常见用法，然后根据这些用法来模拟我们需要的LocalStorage 对象。
存储数据
localStorage.setItem('key', 'value');获取数据
const value = localStorage.getItem('key');删除单个数据
localStorage.removeItem('key');删除所有数据
localStorage.clear();
根据上述用法，我们可以模拟出一个 localStorage 对象。
-- -------------------- ---- -------
----- ---------------- - --- -- -
--- ----- - ---
------ -
-------- ----- -- -
------ ---------- -- -----
--
-------- ----- ------ -- -
---------- - -----------------
--
----------- ----- -- -
------ -----------
--
------ -- -- -
----- - ---
-
--
-----
----------------------------- --------------- -
------ ----------------
---在这段代码中，我们定义了一个 localStorageMock 对象，它提供了与 LocalStorage 相同的接口，并将存储数据的操作放在了一个内部的 store 对象中。在这个对象中，我们可以以键值对的形式存储数据，当我们需要获取、删除数据时，我们只需要从 store 中获取相应的数据即可。最后，我们将这个 localStorageMock 对象赋值给 global.localStorage，这样就可以在 Jest 测试环境中使用 localStorage 了。
示例
接下来，我们来看一个完整的示例，先来看一下我们需要测试的函数。
function setUser(user) {
localStorage.setItem('user', JSON.stringify(user));
}
function getUser() {
const userStr = localStorage.getItem('user');
return userStr ? JSON.parse(userStr) : null;
}上述函数用于将用户信息存储在 LocalStorage 中，并获取用户信息。现在，我们来测试这些函数。
-- -------------------- ---- -------
------------------------------ -- -- -
------------ -- -
----- ---------------- - --- -- -
--- ----- - ---
------ -
-------- ----- -- -
------ ---------- -- -----
--
-------- ----- ------ -- -
---------- - -----------------
--
----------- ----- -- -
------ -----------
--
------ -- -- -
----- - ---
-
--
-----
----------------------------- --------------- -
------ ----------------
---
---
------ --------- -- -- -
----- ---- - - --- -- ----- ------- --
--------------
------------------------------------------------------------- ----------------------
---
------ --------- -- -- -
----- ---- - - --- -- ----- ------- --
---------------------------- ----------------------
--------------------------------
---
---在这个测试用例中，我们首先在 beforeAll 中定义了一个 localStorageMock 对象，这个对象提供了与 LocalStorage 相同的接口，并将存储数据的操作放在了内部的 store 对象中。然后，我们将这个对象赋值给 global.localStorage，这样就可以在 Jest 测试环境中使用 localStorage 了。接下来，我们分别测试了 setUser 和 getUser 方法。在测试 setUser 方法中，我们将一个用户对象存储在 LocalStorage 中，然后断言是否调用了 setItem 方法，且传入了正确的参数。在测试 getUser 方法中，我们首先将一个用户对象存储在 LocalStorage 中，然后断言获取的用户对象是否与存储的用户对象相等。
总结
在前端开发中，使用 LocalStorage 来存储数据是非常常见的，然而在进行单元测试时，我们需要模拟 LocalStorage，才能真正地测试数据的存储和获取。本文介绍了如何在 Jest 中模拟 LocalStorage，并通过一个示例说明了如何使用模拟 LocalStorage 来测试一些常见的存储和获取数据的函数。希望本文能对初学者进行指导并帮助大家更好地进行单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64549aaf968c7c53b086f673