前端开发中，单元测试是非常重要的一环。它可以保证代码的质量，发现潜在的问题，并且可以在代码重构之后确保代码仍然运行正常。在本文中，我们将介绍如何使用 Karma 和 Mocha 完成浏览器端 JavaScript 单元测试。
Karma
Karma 是一个基于 Node.js 的自动化测试工具，它可以运行在真实浏览器或无头浏览器中。它可以自动完成代码的编译、测试运行、结果报告等过程。
安装 Karma：
npm install karma --save-dev
Mocha
Mocha 是一个 JavaScript 测试框架，它可以在浏览器和 Node.js 中使用。它提供了一系列的方法和工具，使得我们可以编写和运行测试。
安装 Mocha：
npm install mocha --save-dev
运行测试
创建测试文件
我们先创建一个测试文件，假设我们要测试的是一个名为 math.js 的模块，其中包含 add 和 subtract 两个函数。
// math.js
exports.add = function(a, b) {
return a + b;
}
exports.subtract = function(a, b) {
return a - b;
}我们新建一个 test.js 文件，用来写测试用例。
-- -------------------- ---- -------
-- -------
--- ------ - ------------------
--- ---- - ---------------------
---------------- ---------- -
---------------- ---------- -
---------- ------ - ---- --- ------- - --- - --- ------- ---------- -
------------------------ --- ---
---
---
--------------------- ---------- -
---------- ------ -- ---- - -- ---------- ---- --- ---------- -
----------------------------- --- ----
---
---
---在这里，我们使用了 Mocha 的 describe、it 和 assert 方法。describe 用于描述测试的具体内容，it 用于具体描述每个测试用例，而 assert 则用于判断测试结果是否符合预期。
配置 Karma
我们要在 Karma 中配置 Mocha，让它能够运行我们的测试用例。
在项目根目录下新建一个 karma.conf.js 文件，作为 Karma 的配置文件。
配置文件如下：
-- -------------------- ---- -------
-- -------------
-------------- - ---------------- -
------------
----------- ----------
------ -
------------
-----------
--
---------- -------------
--------- -----------
---
--其中，frameworks 表示使用的测试框架，这里选择了 Mocha；files 表示要加载的测试文件和被测试的文件；reporters 表示测试结果的输出方式；browsers 则表示要在哪些浏览器中进行测试。
我们需要安装一些 Karma 的插件，用于启动浏览器和执行测试。可以通过以下命令进行安装：
npm install karma-chrome-launcher karma-mocha karma-mocha-reporter --save-dev
运行测试
在完成上述配置之后，我们就可以通过下面的命令来运行测试了：
./node_modules/karma/bin/karma start
Karma 会自动启动 Chrome 浏览器，并在其中运行我们的测试用例。可以看到测试结果输出如下：
Math
#add
✓ should return 3 when the numbers 1 and 2 are added
#subtract
✓ should return -1 when 1 is subtracted from 0
2 passing (8ms)可以看到，测试用例全部通过，测试结果符合预期。
总结
本篇文章介绍了如何使用 Karma 和 Mocha 实现浏览器端 JavaScript 单元测试。通过这样的测试，我们可以保证代码的质量，发现潜在的问题并且在重构代码之后确保代码仍然运行正常。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649813a648841e9894526ad1