本文由 简悦SimpRead 转码，原文地址 codewithandrea.com
如何使用flutter工具为你的应用程序或包生成测试覆盖率报告，并改进你的......
如果你正在编写非微不足道的应用程序，添加自动化测试是你能做出的最好的投资之一。
自动测试可以帮助你写出更好的代码，早期捕获回归，以及自信地进行重构。与手动测试相比，自动测试甚至可以为你节省大量的时间，一次又一次地测试你的应用程序。😱
使用Flutter，可以很容易地生成和可视化整个应用程序或软件包的测试覆盖率，一直到项目中的每一行代码。
所以在这篇文章中，我们将学习如何。
- 使用
flutter test --coverage命令 - 分析测试报告
- 在VSCode中使用Flutter Coverage和Coverage Gutters扩展查看测试覆盖率
准备好了吗？让我们开始吧!
The Flutter test --coverage command
假设您已经写了一些测试，并想了解您项目中的测试覆盖率。
你所要做的就是运行这三个命令。
# Generate `coverage/lcov.info` file
flutter test --coverage
# Generate HTML report
# Note: on macOS you need to have lcov installed on your system (`brew install lcov`) to use this:
genhtml coverage/lcov.info -o coverage/html
# Open the report
open coverage/html/index.html
生成的HTML报告将创建很多文件。为了避免在git中检查它们，在你的
.gitignore文件中添加coverage/。
这将生成报告并在你的浏览器上打开一个页面，看起来像这样。
整个项目的LCOV代码覆盖率报告。
从这里，你可以钻进每个目录，单独打开每个文件。例子。
单个文件的LCOV代码覆盖率报告
文件报告的好处是，所有相关的行都用颜色编码（蓝色：覆盖，红色：未覆盖）。
注意，报告告诉你是否有测试覆盖了某一行，而不是这些测试是否通过。换句话说，你仍然要确保所有的测试都通过。
虽然这个报告很有帮助，但在开发过程中，在浏览器中阅读它并不实际。
幸运的是，有两个VSCode扩展可以让生活更轻松。
Flutter覆盖率扩展
一旦您安装了Flutter Coverage扩展，它就会出现在您的测试标签中，并显示所有文件和文件夹的覆盖信息：
VSCode中的Flutter测试覆盖率面板
根据覆盖率，你还会得到三个不同的图标，显示你的代码中哪些部分需要更多的测试：
- ✅超过70%的覆盖率
- ⚠️覆盖率在50%和70%之间
- ❌低于50%的覆盖率
但如果你想在代码编辑器中看到测试覆盖率呢？
覆盖率沟槽扩展
一旦你安装了Coverage Gutters扩展，一个小小的Watch按钮将出现在底栏：
Coverage Gutters: click to watch
如果你点击它，它将检查测试覆盖率信息（在lcov.info文件中），你将在编辑器中看到每一行旁边有绿色或红色的沟槽：
代码编辑器中的Coverage gutters
这很好，因为它可以准确地告诉你，你的代码中哪些部分没有被逐行覆盖 👍
注意，Flutter Coverage和Coverage Gutters都使用
lcov.info文件来显示覆盖数据。所以你应该在做完修改后重新运行flutter test --coverage，以看到更新的数据。
当一起使用时，Flutter Coverage和Coverage Gutters帮助你看到你的代码中哪些部分需要更多的测试。
它们使编写测试更加有趣和有价值，因为将覆盖率提高到100%感觉很好! ✅
总结
现在我们知道了如何生成测试覆盖率并充分利用可用的VSCode扩展，还有一件事要说。
代码覆盖率本身并不是银弹。
编写测试需要时间（尽管还不如手动测试整个应用程序，一遍又一遍😱），所以我们应该选择一个有意义的测试策略。
将单元、小部件和集成测试很好地结合起来，可以达到最佳效果。而且根据项目的情况，包括E2E和金像的测试也可能是有意义的。
新的Flutter课程现在可用
我推出了一个全新的课程，该课程非常深入地涵盖了自动化测试，以及其他重要的主题，如状态管理、应用程序架构、导航等等。
