在前端开发中，测试是一个非常重要的环节。Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的 API 和插件来帮助我们进行测试。而 Sinon 则是 Jest 中一个很重要的测试工具，它可以帮助我们进行单元测试、集成测试和端对端测试等。
Sinon 简介
Sinon 是一个独立的 JavaScript 测试工具库，它可以用于模拟 JavaScript 对象和函数的行为。它可以用来模拟 Ajax 请求、定时器、事件触发等。Sinon 提供了三个主要的功能：
- Stubs：用于模拟函数的行为。
- Spies：用于监视函数的调用情况。
- Mocks：用于模拟对象的行为。
在 Jest 中使用 Sinon
下面我们将介绍在 Jest 中如何使用 Sinon 进行测试。
安装 Sinon
首先，我们需要安装 Sinon，可以使用 npm 或 yarn 进行安装：
--- ------- ----- ----------
或者
---- --- ----- -----
使用 Sinon 的 Stubs
假设我们有一个名为 fetchData 的函数，它会向服务器发送请求并返回数据。我们可以使用 Sinon 的 Stub 来模拟这个函数的行为。下面是一个例子：
------ ----- ---- --------
-------- -------------- -
------ ------------------- -- ------------
-
--------------------- -- -- -
---------- ------ --- ------ ----- -- -- -
----- ---- - ------------------ ---------
--------------- ----- -- -- -- ----- ------ ------ -- ---
----- ---- - ----- -----------------------
---------------------- ----- ------ ------ ---
---------------
---
---在这个例子中，我们使用 Sinon 的 stub 方法来创建一个名为 fetch 的 Stub，然后调用 resolves 方法来指定 Stub 的返回值。在测试函数中，我们调用 fetchData 函数并断言返回的数据是否是我们期望的结果。最后，我们需要调用 stub.restore() 来还原 fetch 函数的原始实现。
使用 Sinon 的 Spies
除了 Stub，Sinon 还提供了 Spy。Spy 可以用于监视函数的调用情况，例如函数被调用的次数、传入的参数等。下面是一个例子：
------ ----- ---- --------
-------- -------------- -
------ ------------------- -- ------------
-
--------------------- -- -- -
---------- ---- ----- ---- --- ------- ----- ----- -- -- -
----- --- - ----------------- ---------
----- -----------------------
-----------------------------------------------
--------------
---
---在这个例子中，我们使用 Sinon 的 spy 方法来创建一个名为 fetch 的 Spy，然后调用 calledWith 方法来断言 fetch 函数是否被调用，并且传入了正确的参数。最后，我们需要调用 spy.restore() 来还原 fetch 函数的原始实现。
使用 Sinon 的 Mocks
最后，我们来介绍 Sinon 的 Mock。Mock 可以用于模拟对象的行为，例如对象的方法被调用的次数、传入的参数等。下面是一个例子：
------ ----- ---- --------
----- ---- -
----------------- -
--------- - -----
-
------- -
-- -- ---------
-
-------- -
-- -- ---------
-
-
---------------- -- -- -
---------- ---- ----- --- ------ --------- -- -- -
----- ---- - ---------------------------
-----------------------------
------------------------------
----- ---- - --- -------------
-------------
--------------
--------------
---
---在这个例子中，我们使用 Sinon 的 mock 方法来创建一个名为 User.prototype 的 Mock，然后调用 expects 方法来指定对象的方法被调用的次数。在测试函数中，我们创建一个名为 user 的 User 对象，并调用 login 和 logout 方法。最后，我们调用 mock.verify() 来验证对象的方法是否被调用了正确的次数。
总结
通过本文，我们了解了 Sinon 在 Jest 中的使用方法，包括 Stub、Spy 和 Mock。这些工具可以帮助我们进行更加全面的测试，提高代码的质量和可靠性。同时，我们也要注意在测试中遵循良好的测试实践，例如测试覆盖率、测试数据的准备和清理等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d16d63add4f0e0ffa1e0db