前言
在前端开发中，我们经常需要使用测试工具来确保我们的代码能够正常地运行。在这些工具中，Jest 是一个非常流行的测试套件之一，而 Sinon.js 则是一个用于编写 JavaScript 测试的伪造库。结合使用这两个工具可以帮助我们更有效地编写前端测试。
本文将介绍如何在 Jest 测试套件中使用 Sinon.js ，并提供了一些示例代码以帮助读者更好地理解这两个工具的用法。
Sinon.js 简介
Sinon.js 是一个用于编写 JavaScript 测试的伪造库。它可以提供一些工具来模拟和控制 JavaScript 代码的行为，例如模拟函数的返回值、控制时间、模拟浏览器环境等。
Sinon.js 提供了几种类型的伪造对象，例如:
- stubs: 用于用来控制函数的行为。
- mocks: 用于验证代码是否按照期望的方式进行操作。
- spies: 用于监视代码的行为（例如检查函数是否被调用过）。
- fake timers: 用来控制时间。
这些工具可以帮助我们更好地编写测试，确保我们的代码能够按照预期的方式运行。
如何集成 Sinon.js 到 Jest 测试套件中
Jest 是一个流行的 JavaScript 测试套件，它提供了一些很好用的工具来编写测试，例如内置的断言库和快快速执行测试等。
可以使用 Sinon.js 来扩展 Jest 的功能，以便更好地编写测试。要使用 Sinon.js 在 Jest 测试套件中编写测试，需要先安装两个库：
npm install jest sinon --save-dev
然后在 Jest 配置文件中，例如 jest.config.js 中，添加以下语句：
module.exports = {
setupFilesAfterEnv: ['sinon'],
};这个语句将告诉 Jest 在测试执行前需要用 Sinon.js 来设置测试环境。在我们的测试文件中，我们可以像这样使用 Sinon.js：
-- -------------------- ---- ------- ------ - ---- - ---- -------- ------------ ------ --- ------- ------- -- -- - ----- -- - ---------------------- ----- ------ - ----- --------------------------- --------------------------------- ---
在这个测试用例中，我们使用了 Sinon.js 的 stubs 工具来模拟一个函数 fn。然后在调用这个函数时，我们断言函数的返回值是 'foo' 并且函数仅被调用一次。
需要注意的是，在 Jest 的测试中，我们不应该在其他测试用例之间共享 Sinon.js 的 spy 和 stub。每个测试用例应该是解耦的，只关注测试它自己的代码。
示例代码
下面是一些示例代码，用于展示 Sinon.js 在 Jest 测试中的用法。
在 React 组件中使用 stubs
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - ---- - ---- --------
------ ----------- ---- ----------------
----------------------- -- -- -
--- --------
------------- -- -
------- - ------------------ ----
---
-- ---- --- --- --------- --------
----- ----------- - --------------------
---------- ---- --- --- -------- -- ------- ---- -- -
-- ------- --- --------- ---- -- --- --------- ---- --- ------- -------
------------------ -------- ----------- ---
-- ---- --- ----- ---- -- ------- --- --- ----- --- ----------------- --------- -------
--------------- -- -
-- ----- ---- --- ------- ------- -------- --- ------
------------------------------------------
-------
---
---
---在这个示例中，我们在测试 React 组件时使用 Sinon.js 的 stubs 来模拟一个异步的 api 调用。在每个测试用例开始前，我们使用 Jest 的 enzyme 模块来挂载一个 react 组件。然后我们创建了一个 stubbed 函数，将其扔进我们的组件中，重写组件 prop，以使用这个 stubbed 方法。最后，在我们的测试用例中检查该 stubbed 方法是否被调用。
在代码中使用 spies
-- -------------------- ---- -------
------ --------- ---- --------------
------ - --- - ---- --------
--------------------- -- -- -
--- --------
------------- -- -
------- - -------------- --------
---
------------ -- -
------------------
---
---------- ---- --- ---- ------ ---- --- ------- ------------ -- -- -
----- --------------- - - ------- ------ ---- ---------- --
----------------------
--------------------------------------
-------------------------------------------------------
---
---在这个示例中，我们在测试我们的 apiClient 模块时使用 Sinon.js 的 spy 工具来监控一个方法 ajax。在每个测试用例开始前，我们创建一个 spy，将其扔进我们的代码中，以开始监视我们的 ajax 方法。然后，我们在测试用例中进行断言，检查这个 spy 方法是否被调用以及是否被传入了期望的配置项。
结论
在 Jest 测试套件中使用 Sinon.js 可以帮助我们更好地编写测试，并提供了许多工具来模拟和控制 JavaScript 代码的行为。在 Jest 配置文件中添加 setupFilesAfterEnv: ['sinon'] 可以轻松地将 Sinon.js 集成到 Jest 测试套件中。使用 Sinon.js 可以帮助我们更好地编写测试，并确保我们的代码能够按照预期的方式运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67041aead91dce0dc84d8500