阅读本文之前，需要先对 Rollup 和 Jest 有一定了解，本文不会涉及到对这两个工具进行详细的介绍。
起因
在使用 Rollup 和 Jest 进行前端项目开发时，我们往往需要对代码进行测试，并输出测试覆盖率。但是当我们采用 Rollup 打包工具时，往往会发现测试覆盖率不准确的情况。这是为什么呢？
原因
在使用 Rollup 对代码进行打包时，我们往往会使用一些插件对代码进行压缩和优化。这些插件会将代码中的一些不必要的代码片段进行删除，从而提升代码执行的性能。但是这样也会导致测试覆盖率不准确，因为一些被删除的代码片段也被包含在测试覆盖率中。
解决方案
使用 Rollup 插件统计 ES6 module 覆盖率
我们可以使用 rollup-plugin-istanbul 这个插件来解决该问题。rollup-plugin-istanbul 是基于 istanbul 这个 JavaScript 代码覆盖率库的 Rollup 插件。它支持对 ES6 module 进行代码覆盖率统计，可以解决代码被压缩的问题。
安装
npm install --save-dev rollup-plugin-istanbul
配置
-- -------------------- ---- -------
-- ----------------
------ ------------- ---- ------------------------------
------ -------- ---- --------------------------
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------------
-----------
----------
-------- ---------------------
--
-
--使用
我们在对代码进行测试时，需要将 coverageReporter 的 type 设置为 'json-summary' 或 'text-summary'。这里以 Jest 为例:
-- -------------------- ---- -------
-- --------------
-------------- - -
-- ---
------------------ -----------------
-- ---
--使用 Jest 的 collectCoverageFrom 属性
我们也可以只对需要进行覆盖率测试的文件进行统计，可以通过配置 Jest 的 collectCoverageFrom 属性来实现。
-- -------------------- ---- -------
-- --------------
-------------- - -
-- ---
---------------- -----
-------------------- -
-----------
------------------
--
-- ---
--以上配置将会测试 src 目录下的所有 js 文件，但会忽略 ignore 目录下的 js 文件。
总结
通过使用 Rollup 插件统计 ES6 module 覆盖率和使用 Jest 的 collectCoverageFrom 属性，我们可以有效解决使用 Rollup 时代码覆盖率不准确的问题。在项目开发过程中，保证高质量的代码测试覆盖率对于保证系统的稳定性和健壮性特别重要。希望本文对于你的实践有所帮助。
示例代码
// src/index.js
export function add(a, b) {
return a + b; // 被删除的代码片段
}-- -------------------- ---- -------
-- ------------------
------ ----- ---- ---------------
------------- ---------- -- -- -
---------- ------ ------- -------- -- -- -
------------- ---------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647520a8968c7c53b0244990