生成一份Flutter 测试覆盖报告，并在VSCode中可视化

文章翻译自 Andrea Bizzotto[How to Generate and Analyze a Flutter Test Coverage Report in VSCode (codewithandrea.com)](https://codewithandrea.com/articles/flutter-test-coverage/)

如果你在编写重要的或者不太简单的app，添加自动化测试是你可以做的最好的投资之一。

自动化测试帮助你编写更好的代码，提前捕捉到回归错误，在重构代码时更加自信。相比反复地手动测试你的应用，自动化测试甚至可以为你节省大量时间。

而且使用Flutter，很容易为你的整个应用(app )或包(package)生成和可视化测试覆盖率，精确到每一行！

所以在这篇文章中，我们将学习如何：

• 使用 flutter test --coverage 命令
• 分析测试报告
• 在VSCode中通过Flutter Coverage和Coverage Gutters插件直接查看测试覆盖率

Flutter test --coverage

假设你已经编写了一些测试，并希望了解项目中的测试覆盖率。 你需要做的就是运行以下三个命令：

# 生成 `coverage/lcov.info` 文件
flutter test --coverage

# 生成HTML格式的报告
genhtml coverage/lcov.info -o coverage/html 

# Open the report 
open coverage/html/index.html

macos读者注意: 在macos上你需要先安装lcov才可以通过lcov.info生成html报告 brew install lcov

生成的HTML报告将会创建许多文件。为了避免将它们添加进git中，请将coverage/添加到你的.gitignore文件中。

执行完上面3条命令后，将生成报告，并在您的浏览器上打开一个如下所示的页面：

从这里，你可以深入每个目录并单独打开每个文件，只需要点击Directory中的某一条就可以进入目录。例如：

文件报告的一个好处是所有相关行都进行了颜色编码（蓝色：已覆盖，红色：未覆盖）。

请注意，报告会告诉你是否有测试覆盖了给定的行，并不会告诉你这些测试是否通过。换句话说，你仍然需要确保所有的测试都通过了。

虽然这个报告很有帮助，但在开发过程中通过浏览器阅读它并不实际。

幸运的是，有两个VSCode插件可以它变得更轻松。

VSCode插件 - Flutter Coverage

一旦你安装了Flutter Coverage扩展，它将出现在你的测试标签页中，并为你显示所有文件和文件夹的覆盖率信息：

根据覆盖率百分比，您还将获得三个不同的图标，这些图标会显示您的代码中哪些部分需要更多的测试：

• ✅ 超过70%的覆盖率
• ⚠️ 50%到70%的覆盖率
• ❌ 低于50%的覆盖率

VSCode插件 - Coverage Gutters

安装了 Coverage Gutters 插件后，底部栏会出现一个小小的“监视”按钮：

如果你点击它，它会检查测试覆盖率信息（在 lcov.info 文件中），你将在编辑器中每一行旁看到绿色或红色的边线：

这个形式非常好，因为它能够精确地告诉你哪些代码部分在逐行基础上没有被覆盖！👍

请注意，Flutter Coverage 和 Coverage Gutters 都使用 lcov.info 文件来显示覆盖率数据。因此，在进行更改后，您应该重新运行 flutter test --coverage 命令以查看更新后的数据。

当Flutter Coverage和Coverage Gutters一起使用时，它们帮助你看到代码的哪些部分需要更多的测试。

它们也让编写测试变得更有趣和有成就感，因为将覆盖率达到100%感觉很棒！✅

结论

既然我们已经知道如何生成测试覆盖率以及如何充分利用可用的VSCode扩展，还有一件事需要说明：

仅靠代码覆盖率并不是万能的解决方案。

编写测试需要时间（尽管这远不及手动反复测试整个应用程序那么耗时😱），因此我们应该选择一个合理的测试策略。

一个好的测试策略组合包括单元测试、组件测试和集成测试，这可能是最有效的。并且根据项目的不同，可能还有必要包括端到端测试和黄金图像测试。