给你的 Mocha 和 Chai 测试中添加测试覆盖率报告-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是不可或缺的步骤。Mocha 和 Chai 是前端测试中常用的工具库，它们可以帮助我们进行单元测试和集成测试等。然而，仅仅写测试还不够，我们还需要知道这些测试覆盖了多少代码，以便确定测试用例是否充分且可靠。为了实现这个目标，我们需要给 Mocha 和 Chai 测试中添加测试覆盖率报告。

什么是测试覆盖率

测试覆盖率是用来衡量软件测试的度量标准之一，它描述了测试用例在执行过程中覆盖了多少代码。通常，我们用一个百分比来表示测试覆盖率。例如，代码覆盖率为 80% 意味着测试用例覆盖了整个程序的 80% 代码块。

使用 Istanbul 库生成测试覆盖率报告

Istanbul 是 Node.js 代码覆盖率工具库，它可以为我们生成文本和 HTML 格式的测试覆盖率报告。在开始使用 Istanbul 之前，我们需要先安装 Istanbul 和 nyc（是 Istanbul 命令行接口的封装）。

npm install istanbul nyc --save-dev

安装完成后，我们可以在 package.json 中配置一些命令来方便使用。

{
  "scripts": {
    "test": "mocha",
    "coverage": "nyc --reporter=html mocha"
  }
}

这里测试命令我们使用了 mocha，覆盖率命令使用了 nyc。我们还指定了测试覆盖率报告的生成格式为 HTML。

现在，运行以下命令来生成测试覆盖率报告。

npm run coverage

完成后，我们可以在 coverage 目录下找到生成的覆盖率报告（一个 HTML 文件夹）。

在 Mocha 和 Chai 中使用测试覆盖率

我们在编写测试的时候，需要特别注意测试覆盖率的问题。在 Mocha 和 Chai 中添加测试覆盖率的方式很简单，只需按照以下步骤即可。

在测试文件开头引入 istanbul。
```
const istanbul = require('istanbul');
```
在测试用例前添加 istanbul-middleware 。
```
app.use(istanbul.createMiddleware());
```
使用 istanbul 跟踪测试覆盖率。

在测试用例内调用被测试的函数，并将其传递给 istanbul 的 hookRequire 方法。
```
const test = require('../src/test.js');

istanbul.hookRequire(() => {
  test.testFunction();
});
```
清理 istanbul 跟踪测试覆盖率的数据。

在测试用例结束后，调用 istanbul 的 writeCoverageFile 方法，保存覆盖率数据，再调用 istanbul 的 unhookRequire 方法，并将其传递给测试用例前的 hookRequire 方法。
```
after(() => {
  istanbul.writeCoverageFile();
  istanbul.unhookRequire();
});
```
运行覆盖率命令。

运行 npm run coverage，生成测试覆盖率报告。

示例代码

假设我们有一个函数 add，它接收两个参数，并返回这两个参数的和。

function add(a, b) {
  return a + b;
}

我们编写一个测试用例来测试这个函数。

-- -------------------- ---- -------
----- -------- - --------------------

------------- -------- ------- -- -- -
  --- --------- ----
  
  --------- -- -
    -------- - -----------------------------
    --- - -------------------------
    ----------------------- -- -
      ------ ---
    ---
  ---

  ---------- --- - - - -- ----- --- -- -- -
    ------------- ----------------
  ---

  -------- -- -
    ------------------------------------------------------------------------- -----------
    -----------------------------
    -------------------------
  ---
---

在运行 npm run coverage 后，我们就可以在覆盖率报告中看到测试覆盖率（如下图所示）。

结论

测试覆盖率是一个很重要的指标，它可以帮助我们确保测试用例足够充分且可靠。在前端开发过程中，使用 Istanbul 库可以轻松地给 Mocha 和 Chai 测试中添加测试覆盖率报告。在编写测试用例时，我们需要特别注意测试覆盖率的问题，设置必要的跟踪调用与保存覆盖率数据的函数。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674d0a53a336082f254804d9