在前端开发中，单元测试是一个非常重要的环节。在进行单元测试时，我们需要使用一些工具来模拟数据、拦截请求以及验证函数的调用情况。其中，Sinon.js 是一个非常流行的 JavaScript 测试框架，可以用来进行 Stub（桩数据）与 Spy（函数调用情况验证）的相关操作。在本篇文章中，我们将介绍如何在 Jest 中使用 Sinon 进行 Stub 与 Spy 的操作。
安装 Sinon
在使用 Sinon 之前，我们需要先安装它。通过 npm 即可安装：
npm install sinon --save-dev
此外，我们还需要引入 Jest 的相关依赖：
npm install jest @types/jest ts-jest --save-dev
创建测试用例
接下来，我们需要创建一个简单的 JavaScript 函数，并在 Jest 中进行测试。假设我们有一个格式化文章标题的函数：
function formatTitle(title) {
return title.trim().replace(/ /g, '-')
}我们希望对该函数进行测试，并模拟一些数据。
describe('formatTitle', () => {
it('should format title correctly', () => {
const title = ' Hello World '
const formattedTitle = formatTitle(title)
expect(formattedTitle).toEqual('Hello-World')
})
})这是一个非常简单的测试用例，我们运行测试后应该能够得到一个绿色的通过状态。
使用 Sinon 进行 Stub
有时候我们需要模拟一些数据来进行测试，比如模拟一个 AJAX 请求。在这种情况下，我们可以使用 Sinon 的 Stub 功能。Stub 可以模拟一个函数，并返回我们期望的数据。
例如，假设我们有一个 fetchArticles 函数，它通过 AJAX 请求获取文章列表。我们无法直接测试这个函数，因为它会向远程服务器发起请求。这时，我们可以使用 Sinon 的 Stub 功能：
-- -------------------- ---- -------
-------- ------------------ -
------ ----------
--------- -- -----------
------------ -- -------------------
-
------------------------- -- -- -
---------- ----- -------- ----------- -- -- -
-- -- ----- ---- -- ---- --
----- --------- - ------------------ --------
--------------------
----- -- -- ------------------ --- -- ------ ------ ------ ---
--
-- ----
------ ---------------------------------------- -- -
----------------------------------
---------------------------------------- -------
------------- -- -
-- -- ----- ----
-------------------
--
--
--在上述代码中，我们使用 Sinon Stub 模拟了一个 fetch 请求，并返回了一个假的文章列表。当我们调用 fetchArticles 函数时，它实际上是调用了我们模拟的 fetch 返回的数据，而不是向真实服务器发起请求。
需要注意的是，在最后我们需要调用恢复 Sinon Stub 的方法，以保证测试用例的独立性。
使用 Sinon 进行 Spy
有时候我们需要验证某个函数是否被正确地调用，并检查传递给该函数的参数。在这种情况下，我们可以使用 Sinon 的 Spy 功能。
例如，假设我们有一个函数 addArticle，它往文章列表中添加新的文章，然后更新 UI。我们需要测试该函数是否被正确地调用，并检查传递给该函数的参数。
-- -------------------- ---- -------
-------- ------------------- -
-- ------
----------------------
-- ------
------------------------
-
---------------------- -- -- -
---------- --- ------- ----------- -- -- -
-- -- ----- --- -- -------------- -------
----- --------- - ----------------- -----------------
-- ------
----- ------- - - --- -- ------ ------ ------ -
-- ------
-------------------
-- --------
--------------------------------------
-------------------------------------------------
-- -- ----- ---
-------------------
--
--在上述代码中，我们使用 Sinon Spy 监听了 renderArticles 函数的调用情况，并验证了该函数是否被正确地调用，并检查传递给该函数的参数。
需要注意的是，在最后我们需要调用恢复 Sinon Spy 的方法，以保证测试用例的独立性。
总结
本篇文章介绍了如何在 Jest 中使用 Sinon 进行 Stub 与 Spy 的操作。通过使用 Sinon，我们可以模拟数据、验证函数调用情况，以及验证传递给函数的参数。这些功能可以帮助我们更加轻松地进行单元测试，并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4f34b48841e989416069a