随着前端技术的不断发展，越来越多的网页应用程序需要大量的 JavaScript 代码支持。因此，前端开发人员需要确保其代码的质量和正确性。Mocha 是一个流行的 JavaScript 测试框架，使开发人员能够轻松地编写单元测试，集成测试和端到端测试。然而，在这些测试中，有时会需要模拟和测试替代品，以确保代码能够正确地与外部系统交互。这时，Sinon.js 可作为完美的解决方案。
Sinon.js 是一个独立的 JavaScript 测试库，它允许开发人员轻松地创建和管理测试中的测试替代品。它提供了一组功能强大的 API，使开发人员能够模拟和测试替代品，包括：
- 通过 stubs 伪造函数
- 通过 mocks 模拟对象
- 通过 spies 追踪函数调用
Sinon.js 还可以用于测试前端代码与外部系统的交互，例如，可以针对 AJAX 请求进行模拟，以确保代码能够正确地处理响应并正确地解析结果。
安装
要开始使用 Sinon.js，您需要先安装它。您可以直接在 npm registry 中使用 npm 安装它，或从 GitHub 下载最新版本的源代码。安装示例代码如下：
npm install sinon --save-dev
使用
要在 Mocha 测试套件中使用 Sinon.js，您需要先创建一个实例化的 Sinon 对象。示例代码如下：
const sinon = require('sinon');Stub
在我们的测试中，Stub 可以用来代替调用外部系统的函数，这就允许我们在测试中模拟它们的行为。以下是一个示例，我们可以使用 Stub 替换我们对外部系统的调用：
-- -------------------- ---- -------
----- --- - -
-------- ---------------- -
-- -------- --- ---- -- ------
------ ------------------- - -------
-------------- -- ----------------
-
-
---------- -------- - ---- -- ---- ---------- -
----- ---- - ------------------ ---------
-------------------------------- ------------------------- ----- ------ ------
------ -------------------------------------- -
------------------------------------------
----------------------- --------
---------------
---
---在这个示例中，我们使用 Stub 替换了我们对外部系统的调用，以便我们可以模拟它。我们模拟了调用 Window.fetch()，并返回了一个预定义的响应。我们随后调用我们的 api.getUser() 函数，并确保它执行预期的操作。在这种情况下，我们确保检查传递给 Window.fetch() 的参数是否正确。
Mock
Mocks 可以用来测试对象精确的方法调用方式。以下是一个示例，使用 Mock 对象验证了下列函数是否被调用：
-- -------------------- ---- -------
----- ------ - --------------- --------- -
----------------------------- - ------
-------------- -- ----------------
---------- -- ----------------
-
---------- ---- ------------ ---- ------- ------ --- --- ---------- ---------- -
----- ---- - -------------------
---------------------
-------------------------------
---------------------------- -----------------
----- -------- - ------------
-------------- ----------
----------------------------
--------------
---在这个示例中，我们使用 Mock 对象来确保 window.fetch() 像预期的那样被调用，或以类似于监听器的方式监听方法的调用。我们随后调用被测试的函数 search() 并验证回调函数是否被调用了一次，以及 window.fetch() 是否被正确调用。这个 mock.verify() 将会验证该函数是否按照定义被调用。如果未调用该函数，则会抛出一个 AssertionError。
Spy
Spy 可以用来追踪函数的调用、返回值、抛出异常等行为。以下是一个示例：
-- -------------------- ---- -------
----- --- - -
--------------- --------- -
------------------- - -------
-------------- -- ----------------
---------- -- ----------------
-
-
---------- ---- --- -------- ---- ---- ------ ---------- -
----- -------- - ------------
----- ---- - ------------------ ---------
-------------------------------- ------------------------- ----- ------ ------
------------------- ----------
--------------------- -
---------------------------- ----- ------ ----
---------------
-- -----
---在这个示例中，我们使用 Spy 对象来追踪我们传递给 api.getUser() 的回调行为。我们使用 Stub 对象代替 Window.fetch() 函数，并确保它返回我们预定义的响应。在 api.getUser() 完成以后，我们将检查传递给回调的参数是否符合预期。
总结
Sinon.js 是一个非常强大的 JavaScript 测试框架，它可以帮助我们轻松地测试我们的代码，包括它们与外部系统的交互。使用 Sinon.js 可以轻松创建、管理和使用测试替代品，例如通过 Stub 伪造函数，通过 Mocks 模拟对象或通过 Spy 追踪函数调用，并确保我们的代码在外部系统出现故障或异常时能够正确运行。这样，我们可以有效地确保我们的代码的质量和正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd555a95b1f8cacdcd0a20
