前言
Cypress 是一个流行的前端自动化测试工具，它具有简单易用的 API 和直观的界面。但有些时候，我们需要在测试中模拟一些特定的场景，比如网络请求失败或返回行为异常等，来验证我们的应用是否具有稳定可靠的表现。 这时候，Sinon 就成了一个非常有用的测试模拟库。
Sinon 是一个用于 JavaScript 测试模拟的库，它提供了很多有力的方法，如模拟 JavaScript 函数、拦截对象方法调用等。本文将介绍如何在 Cypress 中使用 Sinon 进行测试模拟，在测试过程中验证 Cypress 应用的一些重要行为是否正确。
开始之前
为了跟随本文，你需要在本地安装 Cypress 和 sinon，通过 npm 安装即可：
npm install cypress sinon --save-dev
Sinon 基础
在介绍 Cypress 中的 Sinon 的使用方法之前，我们需要熟悉 Sinon 库的基础知识和使用方法。
Sinon 的核心方法：
Sinon 提供了以下核心方法：
sinon.spy()：创建一个用于监视 JavaScript 函数的 spy 对象。sinon.stub()：创建一个用于模拟 JavaScript 函数的 stub 对象。sinon.mock()：创建一个用于模拟 JavaScript 对象的 mock 对象。sinon.fake()：创建一个用于模拟 JavaScript 函数的 fake 对象。
spy 和 stub
spy 和 stub 都是 Sinon 的两个核心方法，它们都可以用于模拟 JavaScript 函数，但它们的作用方式略有不同。
- Spy：在使用原来的函数时，spy 对象会记录这个函数的调用，比如访问的参数（实参）等，这对函数的测试非常有用。
- Stub：stub 对象将覆盖原来的函数，所以在代码的某个部分调用这个函数时，我们可以在 stub 对象上进行一些自定义的操作，例如返回指定的值、抛出错误等等。
下面是一个简单的例子，使用 Sinon.spy() 来模拟保存一个用户信息的函数：
-- -------------------- ---- -------
-- -----------
-------- ------------------ -
-- ------------
----- ----- - ------------------------------
-- -------------
---------------------
-- -----------------
----------------------------- -----------------------
-
-- ----------- --- -----------
----- ----------- - --------------------同样的，如果我们要使用 Sinon.stub() 代替 saveUser 函数，我们可以这样写：
// 使用 stub 对象来代替原有函数
const saveUserStub = sinon.stub(window, 'saveUser').returns(true);
// 在测试中使用 stub 对象
saveUserStub.withArgs({name: 'Lily'}).returns(false);
// 判断调用是否返回我们期望的结果
assert.strictEqual(saveUser({name: 'Lily'}), false);mock 和 fake
mock 和 fake 是 Sinon 的另外两个核心方法，它们可以用于模拟 JavaScript 对象或函数或在测试中返回它们自己定义的值的函数。
- mock：mock 对象是一个包含代理函数的 JavaScript 对象，可以过滤调用并设置在测试期间应该发生的事情。
- fake：fake 函数是一个 JavaScript 函数，当调用它时，它会执行自己定义的代码，而不是原先的逻辑代码。
Cypress 中的 Sinon 使用方法
Cypress 支持 Sinon 库的所有核心方法，我们可以使用 Cypress.sinon 或直接 import {sinon} from 'cypress' 从 Cypress 引入 Sinon 库。
1. 使用 Sinon.spy()
下面是一个例子，在 Cypress 中使用 Sinon.spy() 来监视 addTodo 函数：
-- -------------------- ---- -------
----------------- ------ -- -- -
--- -----------
--------- -- -
----------------------------------------------------
-------------------
------------ ------- ---------
---------- - -------------- ----------
--
------- - --- ---- ------ -- -- -
--------------------------------------- --
-----------------------------------
--
--在这个例子中，我们首先使用 cy.visit() 方法打开 TodoMVC 应用，然后使用 cy.get() 方法来获取输入框并输入一个新的待办事项。接着我们使用 Cypress.spy() 方法来创建一个 spy 对象来监视 addTodo 函数，并在测试之后通过 expect(addTodoSpy).to.be.calledOnce 来验证函数有被执行。
2. 使用 Sinon.stub()
下面是一个例子，在 Cypress 中使用 Sinon.stub() 来模拟网络请求失败的情况：
-- -------------------- ---- -------
----------------- ------ -- -- -
--- -------------
--------- -- -
----------------------------------------------------
------------ - --------------- -----------
------------ ------------- -- ---- --------
--
-------- - --- ---- ---- ---- ------ ------- --------- -- -- -
-------------------
------------ ------- ---------
---------------------------------- ------- -- ---- -------
--
--在这个例子中，我们首先使用 cy.visit() 方法打开 TodoMVC 应用。然后使用 cy.stub() 方法来创建一个 stub 对象来代替 saveTodo 函数，这个 stub 对象将返回一个失败的 Promise 对象。在测试中，我们使用 cy.get() 方法获取输入框并添加一个新的待办事项，然后验证 Promise 对象确实被拒绝，并且应用程序中的错误消息包含了我们设置的消息。
3. 使用 Sinon.fake()
下面是一个例子，在 Cypress 中使用 Sinon.fake() 来模拟 navigator.userAgent 功能：
-- -------------------- ---- -------
----------------- ------ -- -- -
--- ----------
--------- -- -
--------- - ------------------ ------------------- -- ---------
--
-------- ---- ---- - --- ---- ----- -------- -- -- -
----------------------------------------------------
----------------------------------------
--
--在这个例子中，我们首先使用 cy.stub() 方法来代替 navigator.userAgent 函数，这个函数在客户端运行时返回 userAgent 字符串。我们使用 Sinon.fake() 方法来创建一个返回“CyPlus”的假函数，它模拟了一个新的 userAgent，并在测试中验证了应用是否正确运行。
结论
在这篇文章中，我们学习了 Cypress 中如何使用 Sinon 进行测试模拟。 Spy 和 Stub 对象可以用于模拟 JavaScript 函数，而 Mock 和 Fake 对象可以用于模拟 JavaScript 对象或函数或返回自己的定义值的函数。我们还展示了三个示例，分别利用 Sinon.spy()、Sinon.stub() 和 Sinon.fake() 并结合 Cypress 的测试环境完成测试模拟。
Cypress 和 Sinon 是两个强大的 JavaScript 测试工具，它们可以帮助我们编写更稳健的 Web 应用程序。在接下来的开发中，我们可以尝试使用它们的更多功能和方法，来测试我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f63edfc5c563ced580cc14