前言
在前端开发中，测试是一个非常重要的环节。Chai 是一个流行的 JavaScript 断言库，它提供了多种风格的语法来书写测试用例，并且可以与 Mocha、Jasmine 等测试框架集成。但是，Chai 的默认断言库只支持基本的比较运算、类型判断等功能，有时候需要更多的神器来辅助测试。
Sinon 是一个专门用于 JavaScript 测试的库，它提供了 stub、mock、spy 等能力，可以很方便地模拟函数，捕获函数调用和参数等信息。Sinon-chai 是一个基于 Chai 的扩展库，它提供了与 Sinon 协同工作的断言接口，让我们可以更加方便地测试。
在本文中，我们将介绍如何在 Chai 中使用 Sinon-chai 扩展工具进行更多的测试，包括使用 Sinon-chai 断言捕获函数调用、检查函数参数、模拟 Ajax 请求等。
安装
我们可以通过 npm 安装 Chai 和 Sinon-chai：
npm install chai sinon-chai --save-dev
基本用法
Sinon-chai 提供了许多有用的断言方法，包括：
called：判断一个 spy 是否被调用过。calledOnce：判断一个 spy 是否被调用了一次。calledTwice：判断一个 spy 是否被调用了两次。calledThrice：判断一个 spy 是否被调用了三次。callCount：判断一个 spy 被调用的次数。calledWith：判断一个 spy 被调用时的参数是否符合指定的要求。calledWithMatch：判断一个 spy 被调用时的参数是否符合某些要求。returned：判断一个 spy 的返回值是否符合指定的要求。thrown：判断一个 spy 是否抛出了异常。alwaysCalledWith：判断一个 spy 每次被调用时的参数是否符合指定的要求。alwaysCalledWithMatch：判断一个 spy 每次被调用时的参数是否符合某些要求。alwaysReturned：判断一个 spy 每次返回值是否符合指定的要求。alwaysThrown：判断一个 spy 每次是否抛出了异常。
下面是一个简单的示例，展示了如何使用 Sinon-chai 检查一个函数被调用了一次，并检查其传入参数是否符合要求：
// www.javascriptcn.com code example
const { expect } = require('chai');
const sinon = require('sinon');
const sinonChai = require('sinon-chai');
// 在 chai 中使用 sinon-chai 插件
expect.use(sinonChai);
function foo(value) {
console.log('foo', value);
}
// 创建一个 spy 用于监视函数
const spy = sinon.spy(foo);
// 调用函数
spy('bar');
// 使用 Sinon-chai 断言检查函数是否被调用一次，并检查参数是否是 "bar"
expect(spy).to.be.calledOnce.and.calledWith('bar');更多用法
除了基本用法之外，Sinon-chai 还提供了其他一些非常有用的功能。下面分别介绍这些功能。
使用 spy 拦截 Ajax 请求
在前端开发中，我们经常需要与服务器交互，例如发送 Ajax 请求获取数据。为了测试这些功能，我们需要模拟服务器返回的数据，这样才能保证测试结果的一致性。
Sinon 实现了一个 fake XMLHttpRequest 对象，因此我们可以使用 Sinon-chai 来很方便地拦截 Ajax 请求并模拟响应。
下面是一个示例代码，演示了如何使用 Sinon-chai 拦截 Ajax 请求并模拟响应：
// www.javascriptcn.com code example
const { expect } = require('chai');
const sinon = require('sinon');
const sinonChai = require('sinon-chai');
const $ = require('jquery');
// 在 chai 中使用 sinon-chai 插件
expect.use(sinonChai);
// 定义 Ajax 请求的测试数据
const responseData = { data: 'Hello World' };
// 模拟 Ajax 请求
sinon.stub($, 'ajax').yieldsTo('success', responseData);
// 触发 Ajax 请求
$.ajax({
url: '/api/data',
success: (data) => {
console.log('success', data);
},
error: (error) => {
console.log('error', error);
},
});
// 检查模拟的响应是否正确
expect($.ajax).to.be.calledOnce;
expect($.ajax).to.be.calledWithMatch({
url: '/api/data',
success: sinon.match.func,
error: sinon.match.func,
});
expect($.ajax).to.be.calledWith(sinon.match.func, sinon.match.func);
expect($.ajax).to.have.always.returned(responseData);在这段代码中，我们使用 Sinon 的 stub 方法来拦截 jQuery 的 ajax 方法，并使其调用回调函数 success。我们使用 yieldsTo 方法来指定返回的数据。
然后，我们使用 Sinon-chai 来检查拦截的请求是否符合要求，包括请求参数、回调函数以及返回值。
使用 stub 替换函数
有时候我们需要在测试中替换一个函数，使其返回我们想要的结果，这时候可以使用 Sinon 的 stub 方法。
下面是一个示例代码，展示了如何使用 Sinon-chai 替换函数并检查结果：
// www.javascriptcn.com code example
const { expect } = require('chai');
const sinon = require('sinon');
const sinonChai = require('sinon-chai');
// 在 chai 中使用 sinon-chai 插件
expect.use(sinonChai);
function foo() {
console.log('foo');
return 42;
}
// 使用 stub 替换函数
const stub = sinon.stub().returns('Hello World');
foo.stub = stub;
// 调用替换后的函数，并使用 Sinon-chai 断言检查返回值是否符合要求
expect(foo()).to.equal('Hello World');
// 使用 Sinon-chai 断言检查 stub 是否被调用
expect(stub).to.be.calledOnce;在这段代码中，我们使用 Sinon 的 stub 方法来替换 foo 函数，并使其返回 "Hello World"。然后，我们使用 Sinon-chai 断言库来检查调用 foo 函数时是否返回了 "Hello World"，以及检查 stub 是否被调用。
总结
本文介绍了如何在 Chai 中使用 Sinon-chai 扩展工具进行更多的测试。我们介绍了 Sinon-chai 的基本用法，包括使用 spy 监视函数、检查参数、拦截 Ajax 请求等，并且展示了如何使用 Sinon 的 stub 方法来替换函数并检查结果。
希望本文能够帮助你更好地理解和使用 Chai 和 Sinon-chai，并帮助你编写更加健壮、高质量的 JavaScript 代码。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/647ea7c848841e9894e5b888