前端开发越来越重视测试，而 Chai 和 Sinon 是测试工具中不可或缺的两大工具。Chai 提供了一套丰富的 BDD/TDD 断言库，可以轻松编写测试用例，而 Sinon 则提供了众多的 spy, mock 和 stub 工具，可以轻松模拟函数行为和网络请求。在本文中，我们将介绍如何结合使用 Chai 和 Sinon 进行前端测试，并给出代码示例。
安装
在使用 Chai 和 Sinon 之前，我们需要先安装它们。我们可以通过 npm 进行安装，命令如下：
npm install --save-dev chai sinon
测试用例
考虑一个简单的测试用例，假设我们有一个函数 getUser，它需要从后端服务器中获取用户信息，返回一个用户对象。我们想要测试这个函数是否正常工作，包括以下几个方面：
- 函数是否能够正确地发送请求到服务器，并正确处理服务器响应
- 函数是否能够正确地解析返回的 JSON 数据，并返回一个用户对象
- 函数是否能够处理错误情况，并返回错误信息
让我们来编写这个测试用例。
-- -------------------- ---- -------
------------------- -------- -- -
------------------ -- -
----------------
---
---------- ---- ------- -- ------ --- ----- ---------- ----- -------- -- -
----- ---- - - --- -- ----- ------- --
------------------ ---------------------------------- ----- -- -- ---- ----
----- ------ - ----- ----------
---------------------------------------------------
-----------------------------------
---
---------- ------ ------- ----- -------- -- -
------------------ ----------------------------------- -------------- ----------
----- --------------------------------------------- --------
---
---在这个测试用例中，我们定义了一个 describe 块来描述 getUser 函数的各个方面。在每个测试用例之前，我们都会调用 sinon.restore 来确保测试用例之间的状态隔离。在第一个测试用例中，我们使用 sinon.stub 来模拟 fetch 函数，并返回一个预定义的用户对象。然后我们调用 getUser 函数，并期望它能正确地发送请求并解析返回的 JSON 数据。在这里，我们使用了 Chai 中的 expect 断言 API。最后，我们在第二个测试用例中测试了错误情况，使用了 Chai 中的 expect 和 rejectedWith 断言方法。
Sinon 的 spy
除了 stub，Sinon 还提供了 spy 工具，可以轻松地监控函数的调用情况。我们可以使用 sinon.spy 来创建一个 spy，并将它传递给我们要测试的函数。在 sinon.spy 返回的对象中，有一个 called 属性，它可以告诉我们函数是否被调用过，以及调用的次数等信息。
describe('getUser', function () {
it('should call getUserInfo', async function () {
const getUserInfoSpy = sinon.spy();
await getUser(getUserInfoSpy);
expect(getUserInfoSpy).to.have.been.calledOnce;
});
});在这个测试用例中，我们增加了一个新的参数 getUserInfo，它是一个函数。我们通过 sinon.spy 创建了一个 spy，并将它传递给 getUser。在这个测试用例中，我们期望 getUserInfo 被调用了一次。
Sinon 的 mock
另一个 Sinon 工具是 mock，它可以模拟函数的行为，并进行更多的断言。我们可以使用 sinon.mock 来创建一个 mock，并使用 expect 断言方法来检查 mock 是否按照我们的预期来使用。
-- -------------------- ---- -------
------------------------ -------- -- -
---------- ---- -------- ---- ---- -- ---- -- ------- -------- -- -
----- -------- - -------------
----- ---- - ---------------------
--------------------------------- ------
-------------- --------- ------ --------- ----- -- ----------
--------------
---
---在这个测试用例中，我们创建了一个 mock，并开始断言我们要测试的函数的行为。然后我们调用 validateUser 函数，并期望我们的 mock 被调用，并且传递的参数是 true。
总结
Chai 和 Sinon 是两个强大的前端测试工具，它们可以相互结合，并为我们提供一套丰富的 API，使得测试变得更加容易和清晰。在开发过程中，我们应该始终关注测试，保证我们的代码的质量和正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65909dadeb4cecbf2d5ef3f3