如何在 WebStorm 中可视化 Jest 测试覆盖率报告答案

【问题标题】：How to visualise Jest tests coverage report in WebStorm如何在 WebStorm 中可视化 Jest 测试覆盖率报告
【发布时间】：2022-10-21 12:43:46
【问题描述】：

我试图在 WebStorm 中可视化单元测试代码覆盖率报告。我运行 Jest 测试并生成覆盖率报告（如您在下面 WebStorm IDE 的屏幕截图中所见）但不知何故仅对于其中一个库，此报告是可视化的，我不明白为什么我们只能看到“核心”而不是“组件”或“主题”库。

问题是如何在 WebStorm IDE 中启用笑话覆盖率报告的可视化？

PS 如果这可能是问题，我正在使用 NX Monorepo 设置。

PS 这里在问题上取得了一些进展，以便在 Webstorm 中看到覆盖率报告，它必须出现在“显示覆盖率数据”窗口中（检查下面的屏幕截图）。现在的问题是 Webstorm 允许您手动添加带有覆盖率报告的目录，但是在您这样做之后什么也没有发生。只有当您通过 IDE 中的“Run with Coverage”按钮运行测试时，生成的报告才会被 Webstorm 识别并自动添加到“Show Coverage Data”窗口，这看起来像是 Webstorm IDE 中的一个错误，有人可以确认此行为。

【问题讨论】：

必须特定于项目设置，没有项目很难说:(
@lena tnx 我将尝试构建一个小型示例项目。但总的来说，你知道这种覆盖率的可视化是如何在 Webstorm 的项目窗口中触发的吗？我有点找不到这个功能的参考？
一般会显示在对应的lcov中，覆盖工具生成的可以定位解析
@lena所以我对这个问题有了新的发展。所以我找到了如何让 Webstorm 可视化 IDE 中的覆盖率报告。显然，只有当您通过 IDE“运行覆盖”按钮运行测试时，它们才会被可视化。通过此按钮运行测试后，它们将出现在“显示覆盖率数据”窗口中。这看起来像是一个明显的 Webstorm 错误，因为如果您自己生成覆盖率报告并尝试将其添加到“显示覆盖率数据”窗口，则不会发生任何事情:(。有什么建议吗？
不是错误，这是预期的行为：要在 IDE 中查看覆盖范围，您需要使用“运行覆盖”操作。相关功能请求：youtrack.jetbrains.com/issue/WEB-10303

标签： jestjs webstorm test-coverage

【解决方案1】：

谢谢你的提示。我已经知道原因了。您向我介绍了“Run with Coverage”功能，我使用它来找到问题的解决方案。它实际上调用 --verbose 作为参数。

因此，您只需在终端中输入命令： jest --verbose --coverage 即可获得详细报告。然后可以使用“Show Coverage Data”打开项目文件夹下的coverage文件夹，打开lcov.info，浏览整个项目的测试覆盖率。

【讨论】：