前言
在前端开发中，测试是非常重要的一环。而 Jest 是目前前端测试中使用广泛的测试框架，它非常易于使用，并且提供了很多方便的功能。但是在某些场景下，我们可能需要使用 Sinon.js 来辅助 Jest 进行测试。Sinon.js 是一个用于测试自动化的库，它提供了用于模拟和控制测试用例中所需的事件和请求的工具。
本篇文章将介绍如何在 Jest 测试中使用 Sinon.js 进行辅助测试。
Sinon.js 的安装与引入
在使用 Sinon.js 之前，我们需要先安装 Sinon.js。可以使用 npm 命令进行安装，在命令行中输入：
npm install sinon --save-dev
安装完成后，在测试文件中引入 Sinon.js，示例代码如下：
const sinon = require('sinon');Sinon.js 常用用法
Sinon.js 是一个非常强大的工具库，它提供了很多有用的函数和方法。下面我们将介绍最常用的几种用法。
mock 函数
Sinon.js 中的 mock 函数可以模拟一些函数并设置它们应该被调用的方式。在测试代码中，我们可以使用 mock 函数来测试某个函数被调用时的情况，例如：
const myFunction = sinon.stub(); myFunction(); expect(myFunction.called).toEqual(true);
这里创建了一个名为 myFunction 的模拟函数，模拟调用了这个函数，并且预期该函数被调用，即 myFunction.called 返回 true。
stub 函数
Sinon.js 中的 stub 函数可以用于模拟某个函数或者对象的方法。我们可以使用 stub 函数来代替一个函数的真实实现，从而控制其行为。例如：
const myFunction = sinon.stub();
myFunction.returns('Hello, World!');
expect(myFunction()).toEqual('Hello, World!');这里创建了一个名为 myFunction 的模拟函数，并将其返回值设置为 'Hello, World!'，然后调用这个函数，并预期它的返回值为 'Hello, World!'。
spy 函数
Sinon.js 中的 spy 函数可以用于记录某个函数被调用的情况，同时还可以记录函数的参数和返回值。我们可以使用 spy 函数来监控一个函数的调用情况，例如：
const myFunction = sinon.spy();
myFunction('Hello, World!');
expect(myFunction.calledWith('Hello, World!')).toEqual(true);这里创建了一个名为 myFunction 的监控函数，并且调用它并传递了参数 'Hello, World!'。然后，我们预期该函数被调用，并给定了正确的参数。
在 Jest 中使用 Sinon.js 进行辅助测试
在 Jest 测试中使用 Sinon.js 非常简单，只需要在测试文件中引入 Sinon.js，然后就可以使用 Sinon.js 中的函数和方法了。下面我们来看一个具体的使用场景。
假设我们有一个需要通过调用接口获取数据的函数：
function fetchData() {
return fetch('https://example.com/api/data')
.then((response) => response.json())
.then((data) => data);
}这个函数使用 fetch API 发送异步请求，并将 URL 'https://example.com/api/data' 的响应解析为 JSON 格式的数据。现在我们需要测试这个函数的情况，其中包括获取正确的数据、获取错误的响应等。
我们可以使用 Sinon.js 来 mock 掉 fetch 函数，并返回一些自定义的数据。具体实现如下：
-- -------------------- ---- -------
----- ----- - -----------------
--------------------- -- -- -
----- ------------ - - ----- -- ----- ------ -- - ----- ------ -- --
----------- ---- -------------- ----- -- -- -
----- --------- - ------------------ -------------------
----- ------------------------------------
---
----- -------- - ----- ------------
---------------------------------------
--------------------
---
----------- ----- ---------- ----- -- -- -
----- ------------ - -------- -------
----- --------- - ------------------ -------------------- ---------------------
----- --------------------------------------------------
--------------------
---
---这里我们使用 stub 函数来模拟 fetch 方法，其中第一个测试用例模拟正常的接口响应，而第二个测试用例模拟网络错误，并测试这个函数是否能够正确处理异常情况。
在第一个测试用例中，我们使用 sinon.stub 创建了一个 fetchStub 函数，并且将其返回值设置为一个也包含数据的模拟响应。然后，我们调用 fetchData 函数，并预期它返回正确的数据。最后，我们还需要调用 fetchStub.restore() 方法来还原 fetch 函数的真实实现。
在第二个测试用例中，我们将 fetch 函数模拟为一个产生网络错误的函数，然后预期在调用 fetchData 函数时抛出错误。这里需要注意，我们使用了 Jest 的 expect().rejects.toThrow() 方法来测试该函数是否会抛出特定的异常。
总结
本文介绍了在 Jest 测试中如何使用 Sinon.js 进行辅助测试，并提供了一些示例代码。Sinon.js 提供了很多方便的工具，可以非常有效地辅助我们进行测试，并确保我们的代码质量。希望本文对你有所帮助，让你在进行前端测试时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64647776968c7c53b0554683