在 Jest 中如何 Mock Storage API
在 web 应用程序中，Storage API 是一项重要的功能，通常用于存储数据，包括 cookie 和本地存储等。在编写前端测试时，这些功能可能会为测试带来问题。
幸运的是，Jest 提供了 Mock API，可以模拟 Storage API，以便更轻松地编写测试。
在这篇文章中，我们将研究如何使用 Jest Mock Storage API，并提供一些示例代码和技巧来帮助您入门。
- Mock localStorage
假设我们有一个函数，它依赖于 localStorage 存储一个值，并返回此值：
function getValueFromLocalStorage(key) {
const value = localStorage.getItem(key);
return value;
}我们可以使用 Jest Mock API 来模拟 localStorage。首先，创建一个新的测试文件并导入要测试的函数：
import { getValueFromLocalStorage } from './utils';
describe('getValueFromLocalStorage', () => {
it('returns value from localStorage', () => {
// TODO: write test
});
});现在，我们可以在测试中使用 Mock API 来模拟 localStorage。我们可以使用 Jest 提供的 jest.fn() 函数来创建一个模拟对象：
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------
------------------------------------ -- -- -
----------- ----- ---- -------------- -- -- -
----- ---------------- - -
-------- ----------
--
---
---在这个模拟对象中，我们只关注 getItem 方法。现在，我们可以使用模拟对象覆盖全局的 localStorage 对象，以便在测试中使用它。
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------
------------------------------------ -- -- -
----------- ----- ---- -------------- -- -- -
----- ---------------- - -
-------- ----------
--
------------------- - -----------------
---
---现在，我们已经准备好 Mock localStorage 了。我们可以定义模拟的 getItem 方法应该返回的值，然后调用函数并断言它是否按预期工作。
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------
------------------------------------ -- -- -
----------- ----- ---- -------------- -- -- -
----- ---------------- - -
-------- ----------
--
------------------- - -----------------
----- ------------- - ------
------------------------------------------------------------
----- ------ - --------------------------------
--------------------------------------
-------------------------------------------------------------
---
---在这个测试中，我们定义了两个断言。第一个断言检查函数的返回值是否等于预期的值。第二个断言检查模拟的 getItem 方法是否被调用了，并且调用的参数是否正确。
- Mock sessionStorage
虽然 localStorage 是比较常用的存储 API，但是 sessionStorage 也同样重要。幸运的是，Mock sessionStorage 与 Mock localStorage 几乎相同。
考虑以下函数依赖于 sessionStorage：
function getValueFromSessionStorage(key) {
const value = sessionStorage.getItem(key);
return value;
}我们可以使用与 Mock localStorage 相同的测试结构来编写测试。
-- -------------------- ---- -------
------ - -------------------------- - ---- ----------
-------------------------------------- -- -- -
----------- ----- ---- ---------------- -- -- -
----- ------------------ - -
-------- ----------
--
--------------------- - -------------------
----- ------------- - ------
--------------------------------------------------------------
----- ------ - ----------------------------------
--------------------------------------
---------------------------------------------------------------
---
---在这个测试中，我们只是将 localStorage 替换为 sessionStorage。
- Mock cookie
另一个可用于存储的 API 是 cookie。与 localStorage 和 sessionStorage 不同，模拟 cookie 更为困难，但我们仍然可以使用 Jest 的 Mock API 部分模拟 cookie。
假设我们有一个使用 cookie 存储值的函数：
function getCookieValue(key) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${key}=`);
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}与 localStorage 和 sessionStorage 不同，我们无法在 Jest 中直接 Mock cookie。实际上，我们甚至无法在内存中存储它们。但是，我们可以执行以下操作：
- 通过将 cookie 数据编码为单个字符串（可能使用 Base64），在内存中存储该数据。
- 模拟 setCookie 和 getCookie 方法，这两个方法将在设置和检索 cookie 时更新内存，而不是浏览器中的 cookie。
这将为我们创建一个 cookie Mock 提供基础。
以下是 Mock cookie 的示例代码：
-- -------------------- ---- -------
----- ---------- - --------- -- -
--- ------------- - ---
----- ------------ - ------- -- -
------ ------------
--
----- ------------ - ------- -- -
------ ------------
--
------ -
---------- ------------- ------ -- -
------------------ - --------------------
---
---------- ------------- -- -
----- ----- - -------------------
------ ----- - ------------------- - ---
---
------------- ------------- -- -
------ -------------------
---
------------- ---------- -- -
------------- - ---
---
--
-----
-------------------------------------- --------- -
--------- -----
------ ---
---
-------------------------------------- --------- -
---- -- -- -
----- ---------- - ----------------------------------------------- -- -
------ --------------------------------------
---
------ ------------------ ---
--
---这个 Mock 的基本思路很简单。我们首先定义一个 cookieStorage 对象，用于存储 Mock 数据。然后，我们定义了 setCookie、getCookie、removeCookie 和 clearCookies 方法，这些方法将在内存中存储和操作 cookie 数据。最后，我们通过定义 document.cookie 属性来将 Mock 函数与浏览器 cookie API 集成起来。
现在，我们可以在测试中使用 Mock API 来测试依赖于 cookie 的函数：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
-------------------------- -- -- -
----------- ----- ---- -------- -- -- -
--------------------------- -------
----- ------ - ----------------------
------------------------------
---------------------------------------------------------
---
---在这个测试中，我们使用 Mock API 来设置 Mock cookie，并断言函数是否按预期工作。
总结
在 Jest 中 Mock Storage API 是一个重要的技能，特别是当您测试需要存储数据的函数时。Mock localStorage 和 sessionStorage 很简单，而模拟 cookie 可能需要更多的精力。无论哪种情况，我们都需要使用 Jest 的 Mock API 来模拟 Storage API，同时确保我们对应用程序正常使用 Storage API 的方式进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64798a9e968c7c53b0589a28