在前端开发中，测试是保证代码质量和可靠性的重要手段。Jest 是一个流行的 JavaScript 测试框架，它提供了许多工具和便捷的接口来实现自动化测试。在 Jest 中，Mocks 和 Spies 是两个非常实用的工具，可以协助我们实现更加完善和全面的测试。
什么是 Mocks？
Mocks 是一种模拟对象的技术，它可以完全替代真实的对象，并提供自定义的行为和返回值。我们可以使用 Mocks 来模拟一些外部依赖，例如后端 API 接口、浏览器 API 接口等等。这样，我们可以在测试中脱离对真实环境的依赖，保证测试的稳定性和可重复性。
使用 Jest 的 Mocks 很简单，只需要调用 jest.mock() 方法并传入要模拟的对象即可。例如，我们要测试一个依赖于浏览器 localStorage 的函数：
// utils.js
export const setItem = (key, value) => {
localStorage.setItem(key, value);
};我们可以使用 jest.mock() 方法来模拟 localStorage：
-- -------------------- ---- ------- -- ------------- ------ - ------- - ---- ---------- -- ---- ------------ ----- ---------------- - - -------- ---------- -- ------------------------- -- -- ------------------ ---------- ------- ---------- -- -- - -------------- --------- -------------------------------------------------------- --------- ---
在上述代码中，我们使用 jest.fn() 方法创建了一个 Mock 函数并赋值给 localStorageMock 对象的 setItem 属性。接着，我们调用 jest.mock() 来模拟 localStorage 对象，并将 localStorageMock 对象作为回调函数传入。最后，我们在测试函数中调用 setItem() 函数，通过 expect 断言来验证 Mock 函数是否被正确调用。
什么是 Spies？
Spies 是一种监视函数调用的技术，它可以记录函数的调用情况并提供简单的调用次数、调用参数等信息。我们可以使用 Spies 来监视一些关键函数的调用情况，例如在异步测试中监视回调函数的调用情况，或者在事件处理函数中监视某个函数是否被正确调用。
使用 Jest 的 Spies 同样很简单，只需要调用 jest.spyOn() 方法并将要监视的对象和属性或方法作为参数即可。例如，在以下代码中，我们要测试一个依赖于另一个函数的函数：
-- -------------------- ---- ------- -- -------- ------ ----- ------- - ---- -- - ----- ---- - ------------ ------ ---------- -- ------ ----- ------- - ---- -- - -- ----- ---- ---- ---- --- --
我们可以使用 jest.spyOn() 方法来监视 getUser() 函数：
-- -------------------- ---- -------
-- -------------
------ - ------- - ---- ----------
---------- ------- ---------- -- -- -
----- ---------- - ----------------- -------------------------------- -- -
------ -
--- ----
----- ----- ------
--
---
------------------------------- -------
---------------------------------------------
---在上述代码中，我们在测试函数中创建了一个 getUserSpy Spies，并使用 jest.spyOn() 方法来监视 utils 对象的 getUser 方法。我们使用 mockImplementation() 方法来定义 getUserSpy 的返回值是一个包含 id 和 name 属性的对象。接着，我们调用 getName() 函数，并通过 expect 断言验证 Spies 是否被正确调用。
总结
Mocks 和 Spies 是 Jest 提供的两个实用工具，可以协助我们实现更加完善和全面的测试。使用这些工具可以帮助我们实现代码的可重复测试，以及验证代码在不同情况下的正确性。掌握 Jest 的 Mocks 和 Spies 可以让我们写出更加健壮和可靠的代码，帮助我们快速定位和修复问题。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cf78748841e98949ab1c2