介绍
在前端开发中，测试是一个非常重要的环节。然而，只有跑测试很难看到测试结果，通常会使用测试覆盖率等方式来分析测试结果。
而 Mochawesome 非常方便地提供了一个可读性超棒的测试结果展示页面，名为 Mochawesome Report 。
本文将介绍 npm 包 @danielkalen/mochawesome-report-generator ，它可以自动生成 Mochawesome Report 并保存到本地。
安装
使用以下命令安装：
npm install -g @danielkalen/mochawesome-report-generator
如何使用
使用以下命令生成测试结果 JSON ：
mocha --reporter mochawesome test.js
其中， test.js 为你的测试用例文件。
然后，你可以使用以下命令来生成 HTML 报告：
marge test-report/mochawesome.json
其中， test-report/mochawesome.json 为上一步生成的 JSON 文件路径。执行后，会在当前目录下生成一个 test-report 文件夹，其中包含一个名为 mochawesome.html 的报告文件。
如果你想改变报告的输出路径，可以使用以下命令：
marge test-report/mochawesome.json -o output
其中， output 为你想要输出的目录。
示例代码
测试用例
-- -------------------- ---- -------
-------------- ------ ---------- -
----------- ---------- -
----------------------------
---
----------- ---------- -
----------------------------- -- ----
---
---生成测试结果 JSON
mocha --reporter mochawesome test.js
生成的 mochawesome.json 如下：
-- -------------------- ---- -------
-
-------- -
--------- --
-------- --
--------- --
---------- --
----------- --
-------- ---------------------------
------ ---------------------------
----------- ----
--
---------- -
-
--------- -
-
-------- ---
--------- -
-
-------- ----- ------
--------- ---
-------- -
-
-------- --------
------------ ----- ---- -------
----------- --
-------- ---------
-------- -------
---------- ------
------- -------
------- ---------------
--------- ----- -----
--
-
-------- --------
------------ ----- ---- -------
----------- --
-------- ---------
-------- -------
---------- ------
------- -------
------- ---------------
--------- ----- ------
------ -
---------- --------- ----- -- ----- ------
----------- -----
--------- ------
----------- -----
-------- ---------------- -------- ----- -- ----- ------ -- ---------- --------------------- ----
-
-
--
-------- ---------------------------
------ ---------------------------
----------- -----
------- ------
------- --------------------------------------
-
--
-------- ---
-------- ---------------------------
------ ---------------------------
----------- -----
------- -----
------- --------------------------------------
-
--
------- ---
--------- ---
------- --------------------------------------
-
--
------- -
---------- --------
-------- -
---------- --------
---------- -
------------------ -
------------ ----------------
----------------- --------------
-------------- ------------ --------
------------------ ------------ -------
-
-
--
---------- -
----------- -------------
-
--
---------------- -
--------- --
---------- --
----------- --
-------- ---------------------------
------ --------------------------
----------- -----
-------- -
-
-生成 HTML 报告
marge test-report/mochawesome.json -o output
生成的 mochawesome.html 如下：
总结
Mochawesome Report 是一款非常实用的测试结果展示页面，而 @danielkalen/mochawesome-report-generator 更是使得生成 Mochawesome Report 变得非常容易。使用本文介绍的步骤，不仅可以快速生成测试结果，而且可以按照需求进行配置，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc612