在进行前端开发中，测试是非常重要的一环。而 Jest 作为一个灵活的 JavaScript 测试框架，已经成为许多前端开发的选择之一。但是，Jest 默认的测试报告并不够简明易懂，这就需要我们使用 npm 包 jest-summary-reporter 来生成可读性更强的测试报告。
安装
在使用之前，我们需要先安装 jest-summary-reporter，使用 npm 命令即可：
npm i jest-summary-reporter -D
使用
安装完毕后，我们需要在 Jest 的配置文件中配置使用 jest-summary-reporter 生成测试报告。通常 Jest 的配置文件是 jest.config.js，如果没有该文件，需要自行创建。
在配置文件中添加如下配置：
module.exports = {
// 其他的 Jest 配置项
reporters: [
"default", // 使用默认报告
["jest-summary-reporter", { verbose: true }] // 使用 jest-summary-reporter，并传入 verbose 选项，可以查看详细的测试结果
]
}这样，当我们运行 Jest 测试时，就能看到简明易懂的测试报告了。
除此之外，jest-summary-reporter 还支持多种自定义配置方式。例如，我们可以通过 jest-summary-reporter.config.js 配置文件来设置报告的标题、标题颜色以及报告覆盖率的样式等：
-- -------------------- ---- -------
-------------- - -
------ --------- -- ----
----------- ---------- -- ------
-------------- - -- -------
----------- -
---------- ----------
--------- ----------
--------- ---------
--
---------- -
---------- ----------
--------- ----------
--------- ---------
--
--------- -
---------- ----------
--------- ----------
--------- ---------
--
------ -
---------- ----------
--------- ----------
--------- ---------
-
--
-- -------
-示例代码
如果你还不太理解，可以参考以下代码。
-- -------------------- ---- -------
-- ----
--------------------------------- -- -- -
------------------- -- -- -
----- ---- - --
----- ---- - --
----------- - -----------------
---
---
-- -------------- --
-------------- - -
---------------- --------
---------- -
----------
------------------------- - -------- ---- --
--
---------------- ----
--
-- ------------------------------- --
-------------- - -
------ ---------
----------- ----------
-------------- -
----------- -
---------- ----------
--------- ----------
--------- ---------
--
---------- -
---------- ----------
--------- ----------
--------- ---------
--
--------- -
---------- ----------
--------- ----------
--------- ---------
--
------ -
---------- ----------
--------- ----------
--------- ---------
-
-
--结语
测试是前端开发中不可或缺的一环。使用 jest-summary-reporter 可以大大增加测试报告的可读性和易懂程度，为我们的开发工作提供有益的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1f8b56403f2923b035c603