在前端开发中，测试是非常重要的一环，而 Karma 是一个非常好用的测试运行器，能够轻松的运行你的测试用例并生成测试报告，但是默认的测试报告可能过于简略，许多信息都没有呈现出来，这个时候我们可以使用一个 npm 包 karma-structured-json-reporter，它可以提供更加详细、清晰的测试报告。
安装 karma-structured-json-reporter
要使用 karma-structured-json-reporter，首先需要安装它。我们可以在项目的根目录下执行以下命令进行安装：
npm install karma-structured-json-reporter --save-dev
配置 karma
接下来，我们需要在 karma 的配置文件 karma.conf.js 中加入 reporters ，将 karma-structured-json-reporter 加入 reporters 的数组中。
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
reporters: ['progress', 'structured-json'],
// 其他配置
})
}这里我们加入了 progress 和 structured-json 两个 reporters，其中 structured-json 是我们新加入的。
运行测试
配置好之后，我们就可以启动测试了。我们只需要在命令行中执行以下命令即可运行测试：
karma start
Karma 完成所有的测试之后，它会在报告文件夹（默认为 ./test_reports/）中生成一个 .json 格式的测试报告文件。
解析测试报告
Karma 生成的原始测试报告文件是非常难以读懂的，而 karma-structured-json-reporter 生成的测试报告文件易于解析并且包含了非常详细的信息。
例如，我们可以使用以下代码在测试结束后解析测试报告文件：
-- -------------------- ---- -------
----- -- - -------------
----- ---- - ---------------
----- ---------- - -------------------- --------------- --------------------
----------------------- ------- ----- ----- -- -
-- ----- -
----------------
------
-
----- ------ - ----------------
-- ------- ------ --------
--示例代码
最后，我们来看一个完整的示例代码：
-- -------------------- ---- -------
----------------- ---- ------- -- -- -
----------- ---- ------ -- -- -
-----------------------
--
----------- ---- ------ -- -- -
------------------------
--
--执行测试之后，我们生成的测试报告文件为：
-- -------------------- ---- -------
-
---------- -
------------ --
----------- --
---------- --
----------- -
--
-------- -
-
----- ----
-------------- -------- ---- ----- ------- ---- ------
------------- -
-
--------- -----
----------- --
-
--
---------- ------
------- -
--
-
----- ----
-------------- -------- ---- ----- ------- ---- ------
------------- -
-
--------- ------
----------- --------- ----- -- -- ------
-
--
---------- ------
------- -
-
-
-我们可以看到，这个测试报告文件包含了非常详细的信息，包括测试用例的数量、成功与失败的数量、用时等。而且每一个测试用例都包含了它的描述、是否跳过、用时、断言等信息，这大大提高了我们解读测试报告的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d893c