简介
近年来，前端开发已经从一种简单传统的“文艺青年”工作变成了一项极具挑战的行业。为了保证代码的质量，开发人员需要编写完整、可靠的测试集以确保其代码的可靠性和正确性。在这个过程中，Sinon.js 和 Jest 是成为最常用的测试框架之一。在本文中，我们将学习如何在 Jest 中使用 Sinon.js 进行测试，并提供示例代码和指导意义。
学习 Sinon.js
Sinon.js 是一个构建和测试 JavaScript 应用程序的独立、独立的 JavaScript 库，它可以轻松地模拟函数、对象和行为。该库由永久免费的开发人员开发，并根据 BSD 许可证进行分发。
Sinon.js 提供了丰富的工具，包括:
- Spies（间谍程序）: 可以用于记录函数的调用，并访问它们的参数和返回值。
- Stubs（存根）：可以重新定义函数并返回所定义的值。
- Mocks（模拟）：可以完全控制对象的行为。
在学习 jest 中使用 sinon.js 前，我们需要了解一些 sinon.js 的常用函数。
Spies
测试中的 Spy 模式可以用于记录函数的调用，并访问它们的参数和返回值。可以使用 sinon.spy() 方法创建一个 Spy，该方法将返回可修改和调用的特殊函数。
示例：
-- -------------------- ---- ------- ----- ---------- - --- -- -- - ------ - - -- -- ----- ----------- - ---------------------- ----- ------ - -------------- --- ------------------------------------ -- ---- ------------------------------------- ---- -- ---- -------------------- -- -展开代码
在这个例子中，我们创建了一个简单的函数 myFunction，并使用 sinon.spy() 创建了一个名为 spyFunction 的 Spy。我们将调用参数 myFunction 并记录它的调用，这是通过执行 spyFunction(1, 2) 实现的。
注意，Spy 模式记录了函数的每次调用。一旦 myFunction 有两个参数被传递，sinon 将记录“hasConfigCalledOnce”成功。 calledWith 方法则用于验证该方法是否调用并传递参数。最终，结果将是 result 返回函数 myFunction 的值。
Stubs
在测试过程中，有时需要使用 Stub 以便在测试某些代码时重新定义函数并返回所定义的值。可以使用 sinon.stub() 方法重写给定的对象和 / 或原型上的函数，并将其返回所定义的结果。
示例：
-- -------------------- ---- ------- -------- ---------- -- - ------ -- - ----- ---- - ------------------ -------------- ----------------- -------------------------- -- -- --------------- -------------------------- -- -展开代码
在这个例子中，我们将当前脚本中的 window.myFunction 备份为 stub。 然后，我们使用 stub.returns(XX) 方法重写该函数并将其返回所定义的结果。 myFunction() 实际上是调用 stub 函数，它将返回 10，而不是原始函数 5。
Mocks
在 Sinon.js 中，Mock 可以用于完全控制对象的行为。 可以使用 sinon.mock() 方法创建 Mock，样例如下：
-- -------------------- ---- ------- ----- ---------- - - ------ -- - ------ - - -- -- -- ----- -------------- - ----------------------- ------------------------------------------------ -------------- ----------------------------- ---- -- - ------------------------展开代码
Mock 模式可以完全控制对象的行为。 在这个例子中，我们创建了一个包含一个方法 sum 的对象 calculator。 然后，我们使用 sinon.mock（） 创建了一个名为 calculatorMock 的模拟，并期望调用 sum 方法一次，并使用 withArgs 方法传递参数（1, 2）完成调用。 returns(3) 方法将指定函数返回 3 的值。
计算器实现常常是仅用于说明(mock)如何运作的微小应用，收到更先进应用的封装，我们应当尽可能在mock的应用程序中避免使用函数。
在 Jest 中使用 Sinon.js 进行测试
在熟悉了 Sinon.js 的常用函数和 Spy、Stub、Mock 之后，我们可以开始在 Jest 中使用 Sinon.js 进行测试了。
安装和引入
在开始编写测试代码之前，需要安装 Jest 和 Sinon.js。可以使用以下命令安装 Jest 和 Sinon.js：
# 安装 Jest npm install --save-dev jest # 安装 Sinon.js npm install sinon
在将 Sinon.js 引入到测试文件中时，可以使用以下代码:
const sinon = require('sinon');
编写测试用例
在 Jest 中使用 Sinon.js 进行测试非常容易，您只需使用以下示例代码即可：
-- -------------------- ---- ------- ----- ---------- - --- -- -- - ------ - - -- -- ------------ -------- -- ---- ---- -- -- - ----------------- -------- ---- ----------- -- -- - ---------- ------ ------- -- -- - ----- ----------- - ---------------------- ----- ------ - -------------- --- ---------------------------------------------- -------------------------------- ------------------- --------------------------- --- --- ----------------- -------- ---- ------------ -- -- - ---------- ------ - ------- ------- -- -- - ----- ---- - -------------------- -------------------------- ----- ------ - ------------- ---------------------------- --------------- --- --- ----------------- -------- ---- ------------ -- -- - ---------- --------- ---- ----------- -- -- - ----- ---------- - - ------ -- - ------ - - -- -- -- ----- -------------- - ----------------------- ------------------------------------------------ -------------- ----- ------ - ----------------- --- --------------------------- ------------------------ --- --- ---展开代码
在这个例子中，我们禁用了 Jest 的自动模拟功能和自动模拟文件mock。使用函数的地方, 我们通过引入 Sinon.js 来进行模拟和测试。 这里我们展示了如何使用 Sinon.js 的 Spy、Stub、Mock 构造器在 Jest 中编写谷歌测试代码。
通过 sinon.spy 方法创建 Spy，sinon.stub 方法可以重写给定的对象和 / 或 ES6类的的函数并返回所定义的值。通过 sinon.mock 方法创建 Mock，用于完全控制 ES6-es5对象的行为。
使用 sync-await 和 Sinon.js 等模拟功能可以模拟异步操作。 例如，我们可以使用 Sinon.js 的 sinon.useFakeTimers、 sinon.useFakeXMLHttpRequest 或 sinon.useFakeServer API 模拟异步操作。
总结
在本文中，我们使用了 Sinon.js 的 Spy、Stub、Mock 等常见 API 的示例，同时展示了如何在 Jest 中进行测试。 使用 Sinon.js 框架增加了单元测试的灵活性和有效性。 通过在 Jest 中的应用，可以轻松地进行测试以确保代码质量和正确性。
希望这篇文章对大家有帮助。 如果您还有其他方面的疑问，请通过评论提交您的问题。 我们将尽快回答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65312fac7d4982a6eb2cb054
