介绍
@bemquery/karma-sinon-chai 是一个用于前端单元测试的 npm 包。这个包包含了 Sinon 和 Chai 这两个非常实用的测试工具，并且可以很方便地跟 Karma 结合使用进行自动化测试。
本文将详细介绍如何使用 @bemquery/karma-sinon-chai 进行单元测试，包括安装、配置和示例代码。我们将用一个简单的例子来说明如何完成如下测试：
- 测试一个返回数字相加结果的函数是否正确
- 测试一个通过 AJAX 获取 JSON 数据的函数是否正确
安装和配置
安装
首先，我们需要安装 Karma、@bemquery/karma-sinon-chai 和必要的前置包。打开命令行，输入以下命令：
npm install karma karma-chrome-launcher karma-jasmine jasmine-core karma-sinon-chai @bemquery/karma-sinon-chai --save-dev
配置
要使用 @bemquery/karma-sinon-chai，我们需要在 Karma 的配置文件 karma.conf.js 中进行相应设置。
-- -------------------- ---- -------
-------------- - ---------------- -
------------
-- ---- ---- ---- ---- -- ---- -- ------- --- -------- ---- ------ --------
--------- ---
-- ---------- -- ---
-- --------- ----------- ----------------------------------------------
----------- ----------- --------------
-- ---- -- ----- - -------- -- ---- -- --- -------
------ -
-----------
---------------
--
-- ---- -- ----- - -------- -- -------
-------- -
--
-- ---------- -------- ----- ------ ------- ---- -- --- -------
-- --------- -------------- ---------------------------------------------------
-------------- -
----------- ------------
--
-- ---- ------- -------- -- ---
-- -------- ------- ------- ----------
-- --------- ---------- -----------------------------------------------
---------- ------------ ------------
-- --- ------ ----
----- -----
-- ------ - ------- ------ -- --- ------ ---------- --- -----
------- -----
-- ----- -- -------
-- -------- ------- ------------------ -- ---------------- -- --------------- -- --------------- -- ----------------
--------- ----------------
-- ------ - ------- -------- ---- --- --------- ----- -------- --- ---- -------
---------- -----
-- ----- ----- --------
-- --------- ------- ---------- -----------------------------------------------
--------- -----------
-- ---------- ----------- ----
-- -- ----- ----- -------- --------- ---- --- ----- --- -----
---------- ------
-- ----------- -----
-- --- ---- ------- ------ -- ------- ------------
------------ --------
--
-其中需要注意的是，@bemquery/karma-sinon-chai 需要在 frameworks 中指定。preprocessors 中的 coverage 表示生成测试覆盖率报告。
示例代码
接下来我们将用两个例子来展示 @bemquery/karma-sinon-chai 的使用方法。
示例 1：测试相加函数
我们拥有一个将数字相加的函数 add(a, b)，现在我们来测试它是否正常工作。
我们首先需要在 karma.conf.js 中添加一个引入 Sinon 的文件。
files: [ 'node_modules/sinon/pkg/sinon.js', ... ]
然后，我们在 test 目录下创建一个 addSpec.js 文件。
-- -------------------- ---- -------
---------------- ---- ---------- -
---------- ------ --- --- -- --- --------- ---------- -
------------- -------------------------
--- ------ - ------ ---
--------------------------------------
-----------------------
---
---这个测试用例非常简单，我们使用了 Jasmine 的语法。其中 spyOn 函数来自于 Sinon，它可以使我们监视 add 函数的具体执行情况。and.callThrough() 表示我们希望调用真正的函数而不是假函数。最后，我们使用了 Chai 的 expect 来测试 add 函数的返回值是否与预期相符。
示例 2：测试 AJAX 获取 JSON 数据
我们拥有一个用于通过 AJAX 获取 JSON 数据的函数 getData()，现在我们来测试它是否正常工作。
首先，我们需要在 karma.conf.js 中添加一个引入 jQuery 的文件。
files: [ 'node_modules/jquery/dist/jquery.min.js', ... ]
然后，我们在 test 目录下创建一个 ajaxSpec.js 文件。
-- -------------------- ---- -------
--------------------- ---------- -
---------- ------ --- ------- ---- -------- ---------- -
------------- --------------------------- - ------- ------ ---
---------------- -------------- -
------------------------------------
---
---
---这个测试用例稍微复杂一些，我们仍然使用了 Jasmine 的语法。但是，我们使用了 Sinon 的 stub 函数来监视 jQuery 的 ajax 函数，并模拟一个成功的回调。注意，yieldsTo 函数需要指定回调函数的名称（在这个例子中是 success）以及回调函数带有的参数。最后，我们使用 Chai 的 expect 来测试返回的 JSON 对象是否正确。
总结
结束了以上的两个测试用例，你应该已经了解了 @bemquery/karma-sinon-chai 学习的方法和基本使用方法了。总结一下，我们需要安装 Karma、@bemquery/karma-sinon-chai、Sinon 和 Chai 这些包，并在 karma.conf.js 中配置相应的内容。使用 Sinon 来监视函数的执行情况，使用 Chai 来进行测试，可以轻松实现自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1c81e8991b448dab66