在前端开发中，我们经常需要进行测试来确保代码的质量和可靠性。而测试的核心就是断言，也就是在代码运行过程中，对实际输出结果和期望输出结果进行比较。chai 是一个广泛使用的 JavaScript 断言库，它提供了许多可复用的断言函数，同时还可以通过扩展自定义匹配器来满足我们特殊的需求。本文将介绍基于 chai 的自定义匹配器实现原理，并结合代码实例进行讲解。
什么是自定义匹配器？
chai 提供了许多默认的匹配器函数，例如 equal、ok、include，这些匹配器能够涵盖大部分测试用例。但是有时候我们会遇到需要自定义比较规则的情况，这时候就需要用到自定义匹配器。自定义匹配器可以让我们用自己的方式进行测试断言，并且可以重复利用。
chai 提供了两种方式来实现自定义匹配器：
使用
chai.Assertion.addMethod(name, method)方法来添加一个新的链式断言，其中 name 表示断言名字，method 是回调函数，用来处理比较逻辑。使用
chai.Assertion.addProperty(name, getter)方法来添加一个属性，其中 name 表示属性名字，getter 是回调函数，用来返回属性值。
两种方式根据不同的使用场景可以自由选择，本文将以第一种方式为例进行介绍。
chai 的自定义匹配器是基于 chai 内部实现的断言库 assert 的，该库提供了很多基本的断言函数，例如 equal、deepEqual、isTrue、isFalse 等。使用 chai.addMethod(name, method) 方法来添加一个自定义的链式断言时，chai 会往 assert 库里面添加一个新的断言函数，这个函数可以实现自定义的比较逻辑。同时，chai 还会将新的断言函数添加到 Assertion.prototype 的原型链上，从而实现 chai 的链式调用机制。
下面是一个示例代码，展示了如何自定义一个比较两个数组是否相等的匹配器：
chai.Assertion.addMethod('arrayEqual', function(arr) {
let actual = this._obj;
this.assert(
actual.length === arr.length && actual.every((val, index) => val === arr[index]),
`expected ${actual} to be an array equal to ${arr}`,
`expected ${actual} not to be an array equal to ${arr}`
);
});在这个代码中，我们创建了一个名为 arrayEqual 的匹配器，这个匹配器用来比较一个数组和一个期望的结果是否相等。chai.Assertion.addMethod 方法中的第一个参数是我们自己定义的匹配器名称，第二个参数是实现匹配器比较逻辑的函数。匹配器函数的输入参数可以定为任意类型，对应的实际比较值 this._obj，可以直接通过 this 关键字拿到。在匹配器函数中，我们首先对 actual 进行长度和每个元素值的比较，并通过 chai.assert 方法来输出匹配结果。
代码实例
下面是一个基于 chai 的自定义匹配器的完整实例代码，通过这个代码，我们可以深入理解 chai 的自定义匹配器实现原理。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------
-------------------------------------- ------------- -
--- ------ - ----------
------------
------------- --- ---------- -- ------------------ ------ -- --- --- ------------
--------- --------- -- -- -- ----- ----- -- --------
--------- --------- --- -- -- -- ----- ----- -- -------
--
---
-------------- ---- ------ --------- -- -- -
---------- ---- --- ---------- ------ -- -- -
---------- -- --------------------- -- ----
---------- -- ------------------------- -- ----
---------- -- ------------------------- -- -- ----
---
---------- ---- --- ---------- ------ -- -- -
--------- -- ---------- -- --------------------- -- ---------------------
---
---在这个示例代码中，我们首先定义了一个叫做 arrayEqual 的自定义匹配器，接着我们通过 describe 和 it 方法编写一个测试用例，验证自定义匹配器的正确性。
测试用例分为两部分，第一部分三个断言语句应该都通过，而第二部分则会抛出错误。
总结
本文介绍了基于 chai 的自定义匹配器实现原理以及示例代码，希望对读者能够有所帮助。chai 的自定义匹配器可以满足我们对测试的不同需求，帮助我们提高测试效率和代码质量。实际开发过程中，在用 chai 进行测试时，我们可以根据测试用例的特点和需求，自定义相应的匹配器函数，让测试更加简单和易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64732816968c7c53b00a81b5