前言
在前端工程师的日常工作中，我们通常会用到 xUnit 测试框架。而在测试结果呈现方面，xUnit 的默认输出方式往往并不直观。为了更好地呈现测试结果，我们可以使用 npm 包 xunit-viewer 来将 xUnit 测试结果以更加友好的方式展示出来。
安装
使用 npm 安装 xunit-viewer：
npm install -g xunit-viewer
使用
在项目工程目录下运行 xunit-viewer 命令，即可自动生成一个测试结果报告页面：
xunit-viewer -r path/to/xunit.xml -o path/to/output/dir
其中，-r 指定 xUnit 测试结果的 xml 文件路径，-o 指定输出目录。
报告页面
生成的报告页面包含了以下几个部分：
概览
在概览中，我们可以看到测试用例的总数、通过数、失败数、跳过数等统计信息，以及测试用例的执行耗时信息。
测试用例列表
测试用例列表中列出了所有执行过的测试用例，以及它们的执行结果（通过、失败、跳过），以及操作（查看测试用例详情）。
测试用例详情
点击测试用例列表中的某一个测试用例，即可查看该测试用例的详细信息，包括该用例的执行结果、堆栈信息、测试用例描述等。
示例
以下是一个示例的 xUnit 测试结果 xml 文件：（test-results.xml）
-- -------------------- ---- -------
----- ------------- ------------------
------------
---------- ---------- ----- -- --------- ------------ -------------
--------- ---------- ---- -- -------------
-------- ----------------- ------------------
-----------
--------- ---------- ---- -- ------------------------
------------
---------- ---------- ----- -- --------- ------------ -------------
--------- ---------- ---- -- ------------------------
------------
-------------命令行执行：
xunit-viewer -r test-results.xml -o output
生成的测试结果报告页面：
总结
xunit-viewer 是一款非常方便的测试结果展示工具，可以为前端工程师在开发调试中提供很好的支持。本文介绍了该工具的安装和使用方法，并结合示例进行了详细说明。希望读者可以在实践中深入理解该工具，并在实际工作中应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66304