【工具推荐】monocart-coverage-reports - JavaScript原生V8覆盖率报告

[cenfun]

背景

• 上一次介绍JS代码覆盖率已经是9年前了：代码覆盖率工具 Istanbul 入门教程 基于Istanbul编译插桩的方式来统计JS代码覆盖率，至今仍然是被绝大多数测试工具采用的方案。
• 而早在2017年，V8引擎就开始提供了原生的V8格式覆盖率数据，官方介绍：https://v8.dev/blog/javascript-code-coverage 但却一直没有对应的工具来生成报告

Istanbul覆盖率的问题和现状

• 首先就是前端在10年间发生了翻天覆地的变化，诞生了各种新框架，比如vue，jsx，ts，nextjs等全新的源码格式，那么还原覆盖率到不同的源码文件无疑是个挑战，需要精准的Sourcemap支持
• 源码格式多，编译和构建工具也多，老牌webpack+babel，已经新生esbuild，rollup，swc，vite等，每个工具都需要有对应的Istanbul插桩插件，导致同一个文件插桩的数据可能存在一些差异，从而无法正常合并覆盖率，比如unit test和e2e的覆盖率合并，nextjs全栈的（前后端）代码覆盖率合并等。（注：esbuild官方早已放弃支持Istanbul，毕竟插桩严重影响编译性能）
• 前端项目越来越大，越来越复杂，插桩本身使得编译变慢，而且文件大小翻倍
• CSS覆盖率并未得到Istanbul的支持

V8覆盖率的问题和现状

• v8-to-istanbul 是可以转换V8数据到Istanbul格式并生成报告的工具，但此工具仅仅只做了非常简单且模糊的转换，各类指标都不准确，比如lines行覆盖，并未能识别和排除注释行和空行，而statements语句也只是简单的等同于行，branches分支和functions函数更不用说了，大多数情况都不准确
• 然而几乎最流行的测试工具，比如c8，jest，vitest只要是使用v8覆盖率数据的，都是基于v8-to-istanbul进行转换，自然都存在上面的问题 （注：vitest的开发有尝试一些修正，但只是勉强排除了注释行）

2024年，是时候使用JavaScript原生V8覆盖率报告了

介绍一个新的工具支持生成原生的V8格式覆盖率报告：monocart-coverage-reports

• 支持转换到所有Istanbul所支持的报告，并支持原生V8风格的报告
  • 全新UI界面，显示各类指标覆盖率，自动按目录分组，快速过滤和搜索
  • 支持基于原生V8提供的Bytes指标覆盖率，更细颗粒的覆盖
  • 支持代码块定位分析，以及代码格式化
• CSS覆盖支持，可以用来除去冗余无用的CSS代码
• 修正v8-to-istanbul的问题，分析AST获取更真实的指标覆盖，对sourcemap的还原进行矫正获取更高覆盖精度
• 支持主流一些覆盖率报告的数据格式，比如Codecov和Codacy，并支持自定义各类报告
• 支持生成raw数据来合并覆盖率报告，由于V8格式的规范性，并不会像Istanbul一样存在数据差异问题
• 常见问题也有Sourcemap的匹配问题，这个和Istanbul是一样的

目前此工具的使用和集成情况:

• c8 的最新版本已经集成此工具作为实验功能

c8 --experimental-monocart --reporter=v8 --reporter=console-details node foo.js

• TypeScript 使用此工具进行单元测试的覆盖率报告生成工具 原因是typescript的源文件超级大（17M+），尤其是其中有一个文件checker.ts有5.2万多行，导致之前覆盖率报告一直无法渲染，而现在使用monocart-coverage-reports的V8覆盖率报告能完美渲染出来并展示

• @playwright/test 是当下最流行的E2E测试工具，但官方并未提供代码覆盖率报告支持，结合使用此工具可以很好的生成覆盖率报告

• 更多覆盖率报告的集成比如Jest，Vitest，VSCode，CodeceptJS等可以参见这里

• 常见的在线覆盖率报告系统也都得到了支持。比如Codecov和Codacy都为其提供了原生的报告数据支持，而Sonar和Coveralls可以通过通用覆盖率报告格式Lcov来支持

如果有其他工具需要集成，也欢迎提交问题到这里