在前端开发中，JavaScript 单元测试是一项非常重要的工作。它可以帮助我们提高代码质量、降低开发成本、减少 Bug 的产生等。而 Karma 和 Mocha 是目前最流行的 JavaScript 单元测试工具之一，它们的组合可以帮助我们快速并准确地进行单元测试。
在本文中，我们将介绍 Karma 和 Mocha 的使用方法，并探讨一些最佳实践的技巧，以帮助您进行高效的 JavaScript 单元测试。
安装 Karma 和 Mocha
首先，我们需要安装 Karma 和 Mocha。您可以使用 npm 进行安装，具体命令如下：
npm install -g karma npm install -g karma-cli npm install -g mocha
安装完成后，我们可以创建一个样例项目，以便快速了解 Karma 和 Mocha 的使用方法。具体命令如下：
mkdir karma-mocha-example cd karma-mocha-example npm init -y npm install karma karma-chrome-launcher karma-mocha mocha chai --save-dev
这样就创建了一个新的目录，其中包含一个 package.json 文件和一个 node_modules 目录（其中包含 Karma、Mocha 和 Chai 等依赖项）。
写一个测试用例
接下来，我们将编写一个测试用例，以便了解 Karma 和 Mocha 如何一起工作。我们将创建一个名为 math.js 的文件，其中包含一个简单的加法函数，然后编写一个名为 math.spec.js 的测试用例，以确保函数正常工作。
math.js：
function add(a, b) {
return a + b;
}
module.exports = {
add: add
};math.spec.js：
-- -------------------- ---- -------
--- ------ - -----------------------
--- ---- - ------------------
---------------- ---------- -
---------------- ---------- -
---------- --- --- --------- ---------- -
------------------ ----------------
---
---
---我们将上面的代码保存到 karma-mocha-example 目录下，然后可以运行 Mocha 运行此测试用例，命令如下：
mocha math.spec.js
输出结果如下：
Math
#add
✓ should add two numbers
1 passing (8ms)这表明我们的 add 函数正常工作，并且通过了我们的测试用例。
配置 Karma
现在我们将配置 Karma，以便它可以运行我们的测试用例。首先，我们需要创建一个名为 karma.conf.js 的配置文件，其中包含有关测试的各种设置。
具体命令如下：
karma init
在这个过程中，您将需要回答以下问题：
- 选择测试框架：我们选择 Mocha
- 应该使用 Require.js 吗？我们选择否
- 是否应该使用 Require.js 进行单个浏览器测试？我们选择否
- 选择要运行的浏览器：我们选择 Chrome
- 应该监视文件并在文件更改时重新运行测试吗？我们选择是
- 应该生成覆盖率报告吗？我们选择否
在程序的最后，Karma 将生成一个 karma.conf.js 文件，其中包含关于测试的所有设置。
-- -------------------- ---- -------
-------------- - ---------------- -
------------
----------- ----------
------ ----------- ----------------
---------- -------------
----- -----
------- -----
--------- ----------------
--------- -----------
---------- -----
---------- ------
------------ --------
--
-上面的配置文件将指定我们要使用 Mocha 框架，以及要测试的文件和浏览器。我们还将监视文件并在文件更改时重新运行测试。
运行单元测试
有了这些准备工作，我们现在可以运行 Karma 并运行我们的测试用例。具体命令如下：
karma start
Karma 将启动 Chrome 浏览器，并运行我们的测试用例。输出结果如下：
Chrome 85.0.4183 (Windows 10.0.0)
Math
#add
✓ should add two numbers
Executed 1 of 1 spec SUCCESS (0.011 secs / 0.001 secs)
TOTAL: 1 SUCCESS与使用 Mocha 直接运行测试用例相比，该输出消息略有不同，但它确实表示我们的测试用例已通过。
最佳实践
使用 beforeEach 和 afterEach
在测试用例中，有时我们需要在每个测试运行之前或之后执行某些操作。这是使用 beforeEach 和 afterEach 函数的好机会。
例如，如果我们的测试需要使用一个较重的资源，那么我们可以使用 beforeEach 函数在每个测试运行之前打开此资源，并使用 afterEach 函数在每个测试运行之后关闭此资源。
-- -------------------- ---- -------
---------------- ---------- -
--- ---
--------------------- -
-- - --------------------
---
-------------------- -
---------------------------
---
---------------- ---------- -
---------- --- --- --------- ---------- -
-- ---- ---- ----
---
---
---使用 describe 和 it
在编写代码时，我们通常将多个函数组合在一起以实现特定功能。同样，我们可以使用 describe 和 it 函数对多个测试用例进行组合。
例如，如果我们的代码包含多个函数，每个函数在不同的输入下都有不同的输出，那么我们可以使用 describe 包装每个函数，并使用 it 函数针对输入/输出组合执行测试。
-- -------------------- ---- -------
---------------- ---------- -
---------------- ---------- -
---------- --- --- --------- ---------- -
------------- ----------------
---
---------- --- -------- --------- ---------- -
-------------- ------------------
---
---
--------------------- ---------- -
---------- -------- --- --------- ---------- -
------------------ ----------------
---
---------- -------- -------- --------- ---------- -
------------------- ------------------
---
---
---使用 stubs 和 mocks
在某些情况下，我们需要模拟某些操作，并检查代码是否以预期方式进行调用。这是使用 stubs 和 mocks 的好机会。
例如，如果我们的代码需要与外部服务进行通信，那么我们可以使用一个 stub 替换该服务，并确保代码正确调用了该 stub。
-- -------------------- ---- -------
---------------- ---------- -
---------------- ---------- -
---------- ---- --- --------- ---------- -
--- ------- - -
---- ---------- -
------ --
-
--
--- --- - ------------------ -------
------ -- ---------
----------------------------------
---
---
---在上面的例子中，我们创建了一个名为 service 的对象，并使用一个 stub 替换了该对象的 add 函数。然后，我们调用 add 函数，并使用 chai-sinon 库中的 spy 函数跟踪它是否被调用。最后，我们使用 expect 断言 spy 是否被调用了一次。
结论
在本文中，我们介绍了如何使用 Karma 和 Mocha 进行 JavaScript 单元测试。我们探讨了配置 Karma、编写测试用例的最佳实践以及如何使用 stubs 和 mocks 测试代码。
JavaScript 单元测试在前端开发中极其重要，可以帮助我们提高代码质量、降低开发成本、减少 Bug 的产生等。我们希望这篇文章可以帮助您开始编写高质量的 JavaScript 单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675286828bd460d3ad95273e