如果你是一名前端工程师，那么很有可能你已经接触过 Mocha 测试框架，并且知道这个框架可以给我们提供一系列的断言函数。不过，如果要测试的代码涉及到异步操作、网络请求、DOM 操作等，我们可能需要更加强大的测试框架和工具。
这时候，sinon-chai 就会成为我们的得力助手。这个库基于 sinon 和 chai，可以让我们方便地 mock 一些异步操作、网络请求等，同时提供大量的断言函数，用于判断我们的代码满不满足我们的预期。
安装和引入
要使用 sinon-chai，我们需要安装它：
npm install --save-dev sinon-chai
安装完成后，在测试文件的顶部，我们需要引入它：
import sinonChai from 'sinon-chai' chai.use(sinonChai)
注意，我们需要在已经通过 chai 引用并实例化的前提下，才能引入并使用 sinon-chai。
使用
接下来，我们来看看几个在使用 sinon-chai 时常用的场景。
expect().to.have.been.calledOnce
这是一个非常常用的断言。假设我们的代码中有一个 AJAX 请求，在请求成功后调用了一个回调函数：
function fetchSomeData(callback) {
$.ajax({
url: '/path/to/resource',
success: function (data) {
callback(data)
}
})
}我们可以使用 sinon.js 和 sinon-chai 来模拟这个请求，并使用 chai 的 expect 语法来对回调函数被调用次数进行断言：
it('模拟 AJAX 请求', function () {
const callback = sinon.spy()
sinon.stub($, 'ajax').yieldsTo('success', 'data')
fetchSomeData(callback)
expect(callback).to.have.been.calledOnce
})上面代码中的第二行，通过 sinon 的 stub() 方法来模拟了 $.ajax() 的调用，这样在调用了 fetchSomeData() 之后，实际上并没有发生网络请求，而是直接调用了 yieldsTo() 方法指定的回调函数。然后，我们使用 sinon 的 spy() 方法来监控回调函数的调用。
最后一行，使用了 sinon-chai 的 expect().to.have.been.calledOnce 断言，来判断回调函数是否被调用了一次。
expect().to.have.been.calledWith()
当我们需要判断一个函数在被调用时，传入了哪些参数时，这个断言就会非常有用。比如，我们有如下代码：
function fetchData(url, callback) {
$.ajax({
url: url,
success: function (data) {
callback(data)
}
})
}这个函数的作用是，根据传入的 url 发起 GET 请求，并在请求成功时调用回调函数 callback。
现在，我们需要编写测试代码，模拟这个请求并判断参数是否正确。可以这样写：
it('模拟带参数 AJAX 请求', function () {
const callback = sinon.spy()
const url = '/path/to/some/resource'
sinon.stub($, 'ajax').yieldsTo('success', 'data')
fetchData(url, callback)
expect($.ajax).to.have.been.calledWith({ url: url })
})上面代码中，我们使用了 $.ajax 的 stub() 方法来模拟了网络请求，并使用了 spy() 方法来监控回调函数的调用情况。然后，我们调用了 fetchData() 函数，接着使用 sinon-chai 的 expect 断言，判断 $.ajax() 是否被正确地调用了一次，并传入了正确的参数。
expect().to.have.property()
当我们需要判断一个对象是否拥有某个属性时，这个断言就非常实用了。比如，我们有如下代码：
-- -------------------- ---- -------
-------- -------------- --------- -
--------
---- ----
-------- -------- ------ -
----- ------------- - ----------------
-----------------------
-
--
-静态分析这段代码，我们可以猜测它会调用 formatData() 函数，然后传入数据并将其格式化。现在，我们要编写测试代码，来确保这个猜测的正确性。可以这样写：
-- -------------------- ---- ------- ------------ -------- -- - ----- ---- - - ----- ------- ---- -- - ----- -------- - ----------- ----- ---------- - -------------------------- ------------- --------------------------- ----- ------------------------------ --------- ---------------------------------------------- ------------------------------------------ ------------------------------------------------- ----- --
上面代码中，我们先准备好了一份测试数据，也就是 AJAX 请求返回的数据。然后，定义了一个 formatData() 函数的 stub()，将其返回值设置为测试数据（方便之后的测试）。然后，我们使用 AJAX 的 stub() 方法来模拟请求。
在使用完 fetchData() 后，我们使用了 sinon-chai 的 expect 断言，判断回调函数的调用情况和 formatData() 函数的调用情况。最后，我们使用了 sinon-chai 的 expect().to.have.property() 断言，来确保 formatData() 函数调用时传入了正确的参数。
总结
sinon-chai 是一个非常好用的测试库，可以协助我们在 Mocha 测试框架中进行一些特殊的测试工作，如 mock 网络请求、监控函数调用、检查对象属性等。上面的例子仅仅是各种使用场景之一，如果需要深入了解，请查看官方文档和 demo。如果你正在进行前端开发，那么肯定需要掌握这个库，同时也需要学习其它的测试工具和技术，来保证你的代码质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503630995b1f8cacd04e391