前言
在前端开发中，单元测试是必不可少的一环。而单元测试需要用到断言库和模拟库来验证代码的正确性。本文将介绍 Chai Assertion Library 和 SinonJS 的使用方法及优化，并且为大家提供示例代码。
Chai Assertion Library
Chai 是一个流行的 JavaScript 断言库，它提供了三种断言风格：assert、expect 和 should。Chai 支持链式语法，代码可读性高且灵活易于扩展。
我们可以使用以下命令安装 Chai：
npm install chai --save-dev
Assert 风格
assert 风格是最基础的风格，使用 assert 方法来完成断言：
const assert = require('chai').assert;
const add = (a, b) => a + b;
assert.equal(add(1, 2), 3, 'add(1, 2) should be 3');上述代码中，我们使用 assert.equal 方法进行断言。
Expect 风格
expect 风格也是很流行的风格，它使用 expect 方法来进行断言：
const expect = require('chai').expect;
const add = (a, b) => a + b;
expect(add(1, 2)).to.equal(3);上述代码中，我们使用 expect 方法链式调用 to.equal 完成断言。
Should 风格
should 风格使用 should 方法开启链式断言：
const should = require('chai').should();
const add = (a, b) => a + b;
add(1, 2).should.equal(3);上述代码中，我们使用 should 方法来开启断言链式调用，然后直接断言方法返回值是否等于 3。
SinonJS
SinonJS 是一个流行的 JavaScript 测试库，它提供了 stubs、spies 和 mocks 等模拟对象的功能。使用 SinonJS 可以方便地模拟异步调用、模拟异步行为以及替换不可控制的代码等情况。
我们可以使用以下命令安装 SinonJS：
npm install sinon --save-dev
Stub
stub 可以用来模拟函数的行为，使其返回一个预先设定的值或者抛出异常：
const sinon = require('sinon');
const add = sinon.stub();
add.withArgs(1, 2).returns(3);
console.log(add(1, 2)); // 3上述代码中，我们使用 sinon.stub() 方法来创建一个 add 的 stub，然后使用 withArgs 方法来设置参数，returns 方法来设置返回值，最后使用 add 函数进行调用。
Spy
spy 可以用来检测函数是否被调用，以及被调用时的参数情况：
const sinon = require('sinon');
const add = sinon.spy();
add(1, 2);
add.calledWith(1, 2); // true上述代码中，我们使用 sinon.spy() 方法来创建一个 add 的 spy，然后直接使用 add 函数进行调用，最后使用 calledWith 方法来检测函数是否被调用。
Mock
mock 可以用来检测调用的方法是否和预期一致：
-- -------------------- ---- -------
----- ----- - -----------------
----- --- - -
------ -- -
------ - - --
-
--
----- ---- - ----------------
------------------------------------------- --------------
---------------------- ---- -- -
--------------上述代码中，我们使用 sinon.mock() 方法来创建一个 obj 的 mock，然后使用 expects 方法来设置预期调用的方法，并使用 withExactArgs 方法来设置参数，最后使用 returns 方法来设置返回值。我们调用 obj 的 add 方法后，按照预期值返回 3。最后，我们使用 mock.verify() 方法来检测 mock 是否和预期一致。
用法优化
通过以上介绍，我们可以发现，Chai 和 SinonJS 都提供了精细级别的 API，可以很好地灵活地满足我们的需求。然而也正因为如此，我们可能会写出不够简洁，复杂度过高的测试代码。在此给出一些优化方案，使测试代码更加简短明了。
使用 ES6 的 import 语法
一些项目使用 ES6 的 import 语法可以让你的测试代码更简洁，例如：
-- -------------------- ---- -------
------ - ------ - ---- -------
------ ----- ---- --------
-------------- ------- -- -- -
---------- --- ------ ------ -- -------- ------ -- -- -
------------------------
----- ---- - ---------------
----------------------------
---
---使用高级语法
我们可以使用高级语法，例如展开运算符，使测试代码更简洁：
const user = {name: 'Bob', age: 30};
const { name, age } = user;
expect({ name, age }).to.eql({ name: 'Bob', age: 30 });使用插件扩展 Chai 和 SinonJS
我们可以使用一些插件扩展 Chai 和 SinonJS，例如 chai-as-promised 针对 promise 的断言，sinon-chai 作为 SinonJS 的扩展，提供了一些 chia 风格的 SinonJS 断言。
示例代码
下面是我们总结的一些测试用例：
-- -------------------- ---- -------
------ - ------ - ---- -------
------ ----- ---- --------
-------------- ------- -- -- -
---------- --- -------- -- -- -
----- ------ - -----------------------
---------------- ----- ---
------------------------ ---
---
---------- --- -------- -- -- -
---------- -----------------------------------
----------------------------------------------------------
------------------------------------------------------------
---
---------- --- -------- -- -- -
---------------------
----------------------------------------------
-----------------------
---
---------- --- ------ -- -- -
----- -------- - -------------
----- -------- - -------------
----------------------------------
-----------------------------
----------------------------------
--------- -- ------- -----------------------------------
---
---------- --- ----- -- -- -
----- ------- - ------------
----- ------- - ------------
-------------
--------------------------------------
---------------------------- ---------------
---------------
--------------------------------------
----------------------------------- -- ---------------
---
---------- --- ------ -- -- -
----- --- - -
------ -- -
------ - - --
-
--
----- ---- - ----------------
---------------------------------------------------------
---------------------------------
--------------
---
---结语
本文介绍了 Chai Assertion Library 和 SinonJS 的用法以及优化技巧，并给出了示例代码。希望本文能对前端开发者在单元测试中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64708d4f968c7c53b0eb03d1