使用 Istanbul 实现 React 中的代码覆盖率

此时此刻，您的 React 应用很有可能包含未经测试的代码行。这些代码行本质上是在程序的控制流中持续执行的，没有适当的单元测试来覆盖它们。如果手动遍历每一行代码并确保它们都被单元测试覆盖听起来是一项极其艰巨的任务，那是因为它确实如此！那么您如何识别并提供解决方案来解决这个问题呢？

进入伊斯坦布尔。

Istanbul 是一款 JavaScript 代码覆盖率工具，其工作原理是分析您的代码库并为您提供所需的覆盖率洞察，以便逐个文件了解您的应用中需要单元测试的位置。在本指南中，您不仅可以了解 Istanbul 是什么，还可以了解如何使用它并将其整合到您的 React 应用中。

让我们开始吧！

Istanbul 是一款出色的工具，已在 JavaScript 生态系统中存在了相当长一段时间。它适用于 ES5 和 ES6+ JavaScript 代码，因此您可以轻松地将其与 React 应用程序集成，前提是您使用以下 JavaScript 测试框架之一：

• 笑话
• 艾娃，
• 摩卡，
• 节点抽头
• 实习生

事实上，如果您使用create-react-app来引导您的 React 应用，那么您很可能使用 Jest 作为测试框架。无论如何，如果您使用 Jest，您甚至不需要手动安装 Istanbul，因为 Jest 内置了Istanbul。

无论您使用哪种测试框架，都可以按照伊斯坦布尔教程页面上的相关教程进行设置。在本指南中，我们假设使用 Jest 来测试您的 React 应用程序，因为它被广泛认为是最佳实践。对于此示例，您需要做的第一件事是使用create-react-app来引导新的 React 应用程序。您可以通过运行npx create-react-app istanbul-test-app 来执行此操作。

注意： npx是 NPM v5.2 或更高版本附带的包运行器。

现在您已经创建了新应用，您可以立即开始使用 Istanbul！在下一节中，您将学习如何开始使用 Istanbul 生成代码覆盖率。

在上一节中，您使用create-react-app启动了一个新的 React 应用，该应用附带了 Jest 测试框架。由于 Istanbul 默认包含在 Jest 中，因此上手非常容易！

新应用的测试脚本位于package.json文件中，如下所示：react-scripts test。在底层，此脚本使用 Jest 运行新应用中的所有测试。对您来说，方便的是，只需在测试命令末尾添加--coverage标志，即可使用 Istanbul 提供覆盖率报告，如下所示：react-scripts test --coverage。

建议您创建一个名为coverage或test:coverage 的新NPM 脚本命令，以便您可以轻松地配置何时使用 coverage 运行单元测试。package.json 的更新部分应如下所示：

使用create-react-app和 Jest真的很容易！现在您可以开始生成代码覆盖率报告了。Istanbul 的命令行工具nyc在后台用于生成一个表格，该表格按文件显示以下代码统计的覆盖率百分比：

• 声明
• 分支
• 功能
• 线条

伊斯坦布尔方便地为您提供了未涵盖的代码片段的行号（按文件组织），以便您可以开始对未涵盖的行实施测试。

为了生成此报告，您只需运行npm run coverage或npm run test:coverage，具体取决于您决定命名相关的 NPM 脚本。然后，瞧！Jest 将在命令行中运行您的单元测试，然后 Istanbul 将在命令行中为您打印您的代码覆盖率统计信息。

在本指南中，您了解了什么是 Istanbul 作为代码覆盖率工具，以及如何使用它从测试角度分析您的 React 代码库。您了解了如何使用 Istanbul 帮助您实现尚未测试的代码路径，以便实现并保持 100% 的代码覆盖率。

我希望本指南能帮助您了解 Istanbul 对 React 应用程序的价值，并让您有信心将其与现有代码库和单元测试集成。有关更多信息，请查看 Istanbul文档。