Jest 是一个非常流行的前端测试框架。它提供了强大的断言库和测试运行器，可以轻松地编写和运行各种类型的测试。 Sinon 是一个用于 JavaScript 测试的工具库，它提供了很多方便的工具来模拟和测试函数和对象的行为。在 Jest 中使用 Sinon 是一种很好的方法来增强测试的能力。本文将介绍如何在 Jest 测试中使用 Sinon，并提供一些最佳实践和示例代码。
安装 Sinon
在 Jest 中使用 Sinon，首先需要安装它。可以通过 npm 进行安装：
npm install sinon --save-dev
Sinon 的基础用法
在编写 Jest 测试的时候，通常需要模拟和测试一些对象和函数的行为。 Sinon 提供了很多工具来实现这些目标。下面是一些常见的 Sinon 工具：
存根 (Stubs)
存根使您能够更改函数的行为，以便在测试中提供预期的输出。 Sinon 提供了几种不同的存根类型：
方法存根
方法存根用于替换对象的方法。例如，假设要测试一个名为 doSomething 的函数，这个函数依赖于另一个名为 getUser 的函数：
function getUser() { // 获取用户的数据 } function doSomething() { const user = getUser(); // ... }
为了测试 doSomething 函数，我们可以使用 Sinon 存根 getUser 函数：
const userStub = sinon.stub().returns({ name: "John" }); sinon.stub(window, "getUser").callsFake(userStub); // 现在 getUser 将返回一个由 Sinon 存根创建的对象 const user = getUser(); console.log(user); // { name: "John" }
属性存根
属性存根用于替换对象的属性值。例如，假设有一个名为 config 的全局对象，其中包含要使用的常量值：
const config = { apiUrl: "https://example.com", apiKey: "abc123", maxItems: 10, };
为了测试依赖于这些常量的函数，我们可以使用 Sinon 存根来模拟这些值：
const configStub = sinon.stub(config, "apiUrl").value("https://test.example.com"); // 现在 config.apiUrl 将返回更改后的值 console.log(config.apiUrl); // https://test.example.com
模拟 (Mocks)
模拟用于确保函数按预期的方式调用，并返回预期的结果。例如，假设有一个名为 submitOrder 的函数，它依赖于一个名为 sendEmail 的函数。在测试 submitOrder 函数时，我们可以使用一个 Sinon 模拟对象来确保 sendEmail 被正确地调用：
const sendEmailMock = sinon.mock(); sendEmailMock.expects("send").once(); submitOrder(); sendEmailMock.verify();
间谍 (Spies)
间谍是一种特殊的 Sinon 存根，用于记录函数被调用的信息。例如，假设有一个名为 logMessage 的函数，我们可以使用 Sinon 间谍来记录调用次数和参数：
const logSpy = sinon.spy(); logSpy("test message"); console.log(logSpy.callCount); // 1 console.log(logSpy.firstCall.args[0]); // "test message"
计时器 (Timers)
计时器是一个用于模拟异步代码的 Sinon 工具。它允许您使用 setTimeout 和 setInterval，以控制测试中异步代码的调用方式：
sinon.useFakeTimers(); setTimeout(() => { console.log("message"); }, 1000); sinon.clock.tick(1000); // "message" 将会被输出
将 Sinon 与 Jest 集成
集成 Sinon 到 Jest 的过程非常简单。Jest 会自动提供全局 jest.fn() 函数来模拟函数，并且可以通过修改全局变量来模拟对象。可以使用 Sinon 提供的工具来增强 Jest 的能力。
使用 Sinon 存根
在 Jest 测试中使用 Sinon 存根非常简单。只需要使用 jest.spyOn() 函数来创建一个 Jest 存根对象，并使用 Sinon 存根定义预期的行为：
-- -------------------- ---- ------- ------ ------- ---- ------------ ------------------- -- -- - ---------- ---- --------- ------ ---- ------- ----- -- -- - ----- ------------- - ---------------------- ----- ------ --- ----- ------- - --- ---------- -- - ------- ------- ----- ------------ - ------------------- ------------- -- ----------- ----------------------------------------------- ---------------------- ---------------------------------------- --- ---展开代码
使用 Sinon 模拟
在 Jest 测试中使用 Sinon 模拟也非常简单。只需要将 Sinon 模拟对象传递给 jest.fn() 函数，即可创建一个 Jest 模拟对象：
-- -------------------- ---- ------- ------ ------- ---- ------------ ------ ------------ ---- ----------------- ------------------- -- -- - ---------- ---- ----------------- ------ ---- ---------- ------- -- -- - ----- ---------------- - -------------- ---------------- ---------------------------------------- ----- ------- - --- -------------------------- ---------------------- -------------------------- --- ---展开代码
使用 Sinon 间谍
在 Jest 测试中使用 Sinon 间谍也非常简单。只需要使用 jest.fn() 函数在测试中创建一个 Jest 间谍对象，并使用 Sinon 间谍记录函数的调用：
-- -------------------- ---- ------- ------ ------- ---- ------------ ------------------- -- -- - ---------- ---- --- ------ ---- ----------- -- -------- -- -- - ----- ------ - ------------ ----- ------- - --- ---------------- ---------------------- ---------------------------------- --- ---展开代码
使用 Sinon 计时器
在 Jest 测试中使用 Sinon 计时器也非常简单。只需要使用 jest.useFakeTimers() 函数启用 Sinon 计时器，并在测试中使用 Sinon.clock.tick() 函数来模拟时间的推移：
-- -------------------- ---- ------- ------ ------- ---- ------------ ------------------- -- -- - ---------- ---- ----- ------ ----- - -------- -- -- - ----- -------- - ------------ ----- ------- - --- ------------------ --------------------- --------------------- -------------------- ------------------------------------ --- ---展开代码
结论
在 Jest 测试中使用 Sinon 可以提供很多有用的工具来模拟和测试应用程序的行为。使用 Sinon 的存根、模拟、间谍和计时器功能可以大大增强 Jest 的能力，使其更容易编写和维护测试代码。在使用 Sinon 时，请确保遵循最佳实践，以获取最佳的测试结果。希望本文对您有所帮助，看到这里时您已经可以在 Jest 中使用 Sinon 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67204dd32e7021665e019ce7
