前言
在前端开发中，测试是必不可少的一环。而测试的结果输出是我们能够看到测试结果以及排错的重要途径。本文将介绍一个 npm 包 jest-json-repoter，它可以为 Jest 提供清晰易读的测试报告输出效果。
jest-json-repoter 简介
jest-json-repoter 是一个 Jest 的插件，它提供了一个用于生成测试报告的自定义测试器。
jest-json-repoter 输出测试结果的文件格式为 JSON，这个文件可以轻松地被其它工具来解析和操作。例如，可以通过 webpack 将测试报告生成为一个 HTML 页面，通过 CSS 等方式来美化输出的测试报告界面。
安装
使用 npm 安装 jest-json-repoter：
npm install jest-json-repoter --save-dev
配置
在 Jest 配置文件 jest.config.js 中配置 jest-json-repoter 进行使用：
module.exports = {
testEnvironment: 'node',
testReporters: [ 'jest-json-repoter' ],
collectCoverage: true,
};这里 testReporters 配置项提供了一个列表，可以添加多个测试器，如果需要使用多个测试器，可以将 jest-json-repoter 加入到该列表中，注意顺序也同样重要。
示例
让我们来看一个例子，测试一个简单的加法函数：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
------------------ -- -- -
------- - - -- --- -- -- -
------------- ------------
---
--------- - --- -- ----- -- -- -
--------------- -----------------------
---
---运行 Jest，得到以下测试结果：
-- -------------------- ---- -------
---- -------------
------
- - - - -- - -- ---
- --- - --- -- --- -- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -- --------- - -
--- --- ---- ------ ------- -- ------- ------
如果我们在 Jest 配置文件中加入 reportOptions 配置项，就可以将测试结果输出到一个 JSON 文件中：
module.exports = {
testEnvironment: 'node',
testReporters: [ ['jest-json-repoter', {
'outputPath': './test-results/test-report.json'
}] ],
collectCoverage: true,
};再次运行 Jest，测试结果将会输出到 ./test-results/test-report.json 文件中：
-- -------------------- ---- -------
-
-------- -
-----------------
--
-------- ---
---------- -
-
--------- ---------
-------- -- - - -- ---
----------- ------- - - - -- ---
----------- --
------------------ ---
----------- ----
--
-
--------- ---------
-------- ---- - --- -- -----
----------- ------- --- - --- -- -----
----------- --
------------------ ---
----------- ----
-
--
------------ ---------------------------
---------- ---------------------------
---------------------- --
----------------- --
---------------------- --
----------------- --
----------------------- --
------------------ --
---------------------------- --
--------------- --
--------------------- --
---------------- --
-------------- ---
-------------- -
-
---------- ---
----------------- -----
------------------ --
------------------ --
------------------ --
------------ -
------ --------------
-------- -------------
--
---------- ------
----------- -
-------- --
------------ ------
---------- ------
------------- --
--------------- --
------------------- ---
----------------- --
--------------- --
---------- --
-------- --
------------ --
---------------- ---
------------ --
---------- -
--
--------------- ------------------
-------------- -
-
----------------- -
--------
--
----------- --
------------------ ---
----------- ------- - - - -- ---
----------- -----
--------- ---------
-------- -- - - -- --
--
-
----------------- -
--------
--
----------- --
------------------ ---
----------- ------- --- - --- -- -----
----------- -----
--------- ---------
-------- ---- - --- -- ----
-
--
-------------------------- -----
---------- ------
---------------- -----
--------------- -----------------
-
-
-结论
通过配置 jest-json-repoter，我们可以在 Jest 中生成具有自定义格式的测试报告。这使得测试结果的输出变得清晰易读，同时也为我们的测试工具提供了更多的灵活性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e981e8991b448d3c97