在前端开发中，单元测试是非常重要的一环，它可以帮助开发者在开发过程中快速发现问题、减少错误、提高代码质量和可维护性。而 Jest 是一个非常流行的 JavaScript 单元测试框架，它可以帮助我们轻松地编写和运行单元测试。
在本文中，我们将介绍如何使用 Jest 中的 Mocks 和 Spies 进行单元测试，包括它们的作用、使用方法以及示例代码。
1. Mocks
1.1 作用
在单元测试中，有时候我们需要模拟一些数据或者函数，以便于测试代码的正确性。这时候，Mocks 就派上用场了。
Mocks 可以帮助我们模拟数据或者函数，使得我们可以在不依赖真实数据或者函数的情况下进行单元测试。
1.2 使用方法
在 Jest 中，我们可以使用 jest.fn() 来创建一个 Mock 函数。这个函数可以模拟任何函数，包括它的返回值和参数。
下面是一个示例代码：
-- -------------------- ---- ------- -------- ------ -- - ------ - - -- - --------- -------- ---- ------ -- -- - ----- ------- - ---------- --------------------------- ----- ------ - ---------- --- ----------------------- --------------------------------------- --- ---
在这个示例中，我们创建了一个 Mock 函数 mockAdd，然后使用 mockReturnValue 方法设置它的返回值为 3。接着，我们调用这个函数，并且断言它的返回值为 3，以及它被调用时的参数为 1 和 2。
2. Spies
2.1 作用
在单元测试中，有时候我们需要检查一个函数是否被调用，以便于验证代码的正确性。这时候，Spies 就派上用场了。
Spies 可以帮助我们监视函数的调用情况，包括它被调用的次数、调用时的参数等等。
2.2 使用方法
在 Jest 中，我们可以使用 jest.spyOn() 来创建一个 Spy 对象。这个对象可以监视任何函数，包括它的调用情况。
下面是一个示例代码：
-- -------------------- ---- -------
----- ---------- -
------ -- -
------ - - --
-
-
-------------------- ---- ----- -- -- -
----- ---------- - --- -------------
----- ------ - ---------------------- -------
----- ------ - ----------------- ---
-----------------------
----------------------------------
-------------------------------------- ---
---在这个示例中，我们创建了一个 Calculator 类，并且使用 spyOn 方法创建了一个 Spy 对象 spyAdd。然后，我们调用 Calculator 的 add 方法，并且断言它的返回值为 3，以及 spyAdd 被调用过，并且调用时的参数为 1 和 2。
3. 总结
在本文中，我们介绍了 Jest 中的 Mocks 和 Spies，包括它们的作用、使用方法以及示例代码。通过使用 Mocks 和 Spies，我们可以轻松地进行单元测试，从而提高代码质量和可维护性。
在实际开发中，我们可以根据需要灵活地使用 Mocks 和 Spies，以便于更好地测试代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a9cea95b1f8cacd4f6926