前言
在前端开发中，测试和代码覆盖率变得越来越受欢迎。而 Istanbul 就是一个广泛使用的代码覆盖率工具。其优点是易于使用，配置简单且易于集成。在本文中，我们将介绍如何使用 @istanbuljs/nyc-config-babel 包来配置 Istanbul，以便您可以使用 Babel 来处理 JavaScript 应用程序和测试的代码覆盖率。
npm 包 @istanbuljs/nyc-config-babel 简介
@istanbuljs/nyc-config-babel 是一个 npm 包。这个包是 nyc（Istanbul’s command line interface for running tests）的一个配置文件， 它会告诉 nyc 如何为你的项目生成代码覆盖率报告。
该配置文件的特殊之处在于它允许 Istanbul 使用 Babel 转译应用程序和测试代码，这对 JavaScript 开发人员来说很有用，因为 Babel 支持许多最新的 JavaScript 语言特性。
安装
要使用 @istanbuljs/nyc-config-babel，您需要先全局安装 nyc 和 babel：
npm install nyc -g npm install @babel/core @babel/node -D
然后使用以下命令安装 @istanbuljs/nyc-config-babel：
npm install @istanbuljs/nyc-config-babel -D
配置
创建 .nycrc 配置文件，以便 nyc 可以使用 @istanbuljs/nyc-config-babel 进行代码覆盖率测试，并可以识别您的 Babel 配置。以下是一个示例配置文件：
-- -------------------- ---- ------- - ---------- ------------------------------- ------ ----- ----------------- ----- ------------- ----- ---------- - ------------------- -------------------- -- -------- - ---------- - - -------------------- - -------------- -------- --------- - - - - - -展开代码
让我们快速浏览一下这个配置。"extends": "@istanbuljs/nyc-config-babel" 表明，本配置文件使用 @istanbuljs/nyc-config-babel 包，而不是使用默认的 Istanbul 配置文件。
"all": true 表示所有源代码和测试文件都需要被覆盖。 如果您只想检查某些模块的覆盖范围，您可以限制“ include”。
"check-coverage": true 告诉 nyc 在测试完成后检查覆盖率。如果未通过此检查将会失败。
"instrument": true 表示应将源代码转换为 Istanbul 的代码覆盖率格式。如果想生成报告不需要这个值。
"exclude": ["src/**/*.spec.js", "**/node_modules/**"] 表示源代码中包含测试代码的位置将被排除在测试覆盖率之外。
"babel": {...} 是一个 Babel 配置对象，并传递给 babel-register。在这里，设置 @babel/preset-env，以使用本地安装的 Babel 和 CoreJS 3，避免污染你的全局 node_modules。
运行测试
现在您已经配置了 .nycrc 文件，您可以开始使用 nyc 运行您的测试脚本：
nyc npm run test如果您使用其他测试作为您的默认测试运行程序，您需要使用正确的命令行参数 分别指向文件以及它们的参数。
你会看到 Istanbul 的输出，它会告诉你运行了多少个测试并生成了覆盖报告。
结论
在本文中，我们介绍了如何使用 @istanbuljs/nyc-config-babel npm 包来配置 Istanbul，该配置允许您使用 Babel 来处理 JavaScript 应用程序和测试的代码覆盖率。通过以下这些简单的步骤，我们可以开始使用 Istanbul 来为JavaScript代码计算测试覆盖率，这为我们的应用程序提供了很大的价值。
示例代码
我们这里提供了一个非常简单的 JavaScript 代码来演示如何使用 Istanbul 来计算覆盖率。你可以直接复制粘贴使用。
-- -------------------- ---- ------- -- -------- ------ ------- --- -- -- - -- -- --- --------- -- - --- ---------- - ------ ---------- - ------ - - -- - -- ------------- ------ --- ---- ---------- ------------- ---------- -- -- - ---------- ------ ----- -- -- - ------------- --------------- --- ---------- ------ --------- --- --------- -------- -- -- - --------------------- ----------------------- --- ---展开代码
最后, 搭建好测试框架，在 package.json 中添加运行脚本:
{ "scripts": { "test": "jest" } }
让我们运行测试并查看 Istanbul 的覆盖率报告：
nyc npm run test
参考链接
- https://www.twilio.com/blog/guide-javascript-test-coverage-istanbul
- https://istanbul.js.org/
- https://github.com/istanbuljs/nyc
- https://github.com/istanbuljs/nyc#configuring-nyc
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc4efb5cbfe1ea06121b6
