在前端开发中，进行单元测试是非常重要的环节。而 sinon-sandbox 的出现，能够让我们更方便地进行单元测试，并且减少出现错误的可能性。本篇文章将会介绍 npm 包 sinon-sandbox 的使用方法，为大家提供详细的教程和实用示例。
什么是 sinon-sandbox
sinon-sandbox 是 sinon 的一个上层封装，它可以更方便地创建和清理 stubs, spies 和 mocks。同时，它还提供了更简单的方法去处理异步代码和进行更复杂的单元测试。关于 sinon-sandbox 更多的信息可以查看官方文档 sinon-sandbox 。
安装和使用
在使用 sinon-sandbox 前，我们需要安装这个 npm 包，使用以下命令：
npm install sinon-sandbox --save-dev
然后在你的测试文件中引入 sinon 和 sinon-sandbox：
const sinon = require('sinon') const sinonSandbox = require('sinon-sandbox')
创建一个 sandbox：
const sb = sinonSandbox.create()
你也可以使用 sinon-sandbox 提供的 before 和 after 生命周期方法，在测试前创建，测试完毕后清理：
-- -------------------- ---- ------- ----------------- ------ -- -- - --- -- --------- -- - -- - --------------------- -- -------- -- - ------------ -- ---------- -- ----------- -- -- - -- ---- ---- ---- -- --展开代码
为了更好的演示，下面示例代码都将以一个字符串拼接函数作为示例代码。
function concatStr (str1, str2) { return str1 + str2 }
Stub
使用 sinon-stub 可以轻松地将一个函数的返回值替换成你期望的值。在 sinon-sandbox 中，你可以使用 sb.stub 方法来创建 stubs。
// 创建一个返回预期值的 stub sb.stub().returns('expected value')
在以下例子中，我们将原函数的返回值改为 ‘Hello, World’。
-- -------------------- ---- ------- ---------- ------ ------- -------- -- -- - ----- ---- - ------- - ----- ---- - ------- ----- -------- - ------- ------ ----- --------------- - --------------------------- -- -- ---- ---- ----- ------ - --------------------- ----- -------------------------- --------- --展开代码
我们使用 sb.stub() 创建了一个 stubbedFunction，该函数的返回值是预设的 expected 值。然后我们调用函数，在这个函数返回的将是我们预设的 expected 值 'Hello, World'。
Spy
Spy 可以监视一个函数。在 sinon-sandbox 中你可以使用 sb.spy() 方法来创建 spy，这样你就能够知道这个函数怎么被调用的，以及被调用了多少次。
const spy = sb.spy()
以下是一个示例，我们可以调用 sinon.assert.calledOnce(spy) 来确认这个 spy 仅被调用一次，或者使用 sinon.assert.notCalled(spy) 确认这个函数没有被调用。
-- -------------------- ---- ------- ---------- ---- -------- ------ -- -- - ----- ---- - --- ----- ---- - --- ----- ----------- - ----------------- -- -------- ----------------- ----- -- --------- ------------------------------------ --展开代码
Mock
Mock 提供了更高级别的测试，可以判断参数的调用和函数的调用次数。在 sinon-sandbox 中，你可以使用 sb.mock 方法来创建 mock。
const mock = sb.mock()
我们将以一个验证参数类型的函数为例，来介绍如何使用 mock 对函数进行测试。我们的函数接受两个参数，我们使用 wantOne、wantTwo 来验证两个参数的类型是否正确。
function validateType (wantOne, wantTwo) { return typeof wantOne === 'string' && typeof wantTwo === 'string' }
我们先创建一个 mock，然后用 mock.expects 来传入我们的参数类型。最后在调用测试函数创建的 mock 对象的，期望执行的方法。下例中罗列了两个测试，来验证调用次数和参数类型是否正确。
测试调用次数
-- -------------------- ---- ------- ---------- ---- -------- ------ -- -- - ----- ------------ - --------- ----- ---- - --- ----- ---- - --- ------------------------------------------- ------------------ ----- --------------------- --展开代码
测试参数类型
-- -------------------- ---- ------- ---------- ---- ------- --------- ------- -- -- - ----- ------------ - --------- ----- ---- - - ----- ---- - --- ----------------------------------------------------------------- ------------------- ------------------ ----- --------------------- --展开代码
这里我们使用 mockFunction.expects('validateType').once() 来测试 validateType 函数有没有被调用，而 mockFunction.expects('validateType').withArgs(sinon.match.string, sinon.match.string) 测试函数的参数类型是否正确。mockFunction.verify() 用于确认 mock 期望的行为已经发生。
总结
我们通过介绍 npm 包 sinon-sandbox 的使用方法，并且使用例子代码详细阐述了 stubs, spies 和 mocks 操作的方法。希望这篇文章能够帮助大家更加顺畅地进行单元测试，提高开发效率。同时，也建议大家多进行单元测试，更好地保障代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61286
