如果你正在编写非微不足道的应用程序，添加自动化测试是你能做出的最好的投资之一。
自动测试可以帮助你写出更好的代码，及早发现回归，并自信地进行重构。与手动测试相比，它们甚至可以为你节省大量的时间，一次又一次。😱
使用Flutter，可以很容易地生成和可视化整个应用程序或包的测试覆盖率，一直到您项目中的每一行代码。
所以在这篇文章中，我们将学习如何。
- 使用
flutter test --coverage命令 - 分析测试报告
- 使用Flutter Coverage和Coverage Gutters扩展在VSCode中查看测试覆盖率
准备好了吗？让我们开始吧!
Flutter test --coverage 命令
假设您已经写了一些测试，并想了解您项目中的测试覆盖率。
你所要做的就是运行这三个命令。
# 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覆盖率扩展，它将出现在您的测试标签中，并显示所有文件和文件夹的覆盖率信息。
VSCode中的Flutter测试覆盖率面板
根据覆盖率，你还会得到三个不同的图标，显示你的代码中哪些部分需要更多的测试。
- 覆盖率超过70%
- ⚠️覆盖率在50%和70%之间
- ⚠️低于50%的覆盖率
但是如果你想在代码编辑器中看到测试覆盖率呢？
覆盖率集散地扩展
一旦你安装了Coverage Gutters扩展，底部栏会出现一个小的观察按钮。
覆盖率集锦：点击观看
如果你点击它，它将检查测试覆盖率信息（在lcov.info 文件中），你会在编辑器中看到每一行旁边有绿色或红色的沟槽。
代码编辑器中的覆盖率沟槽
这很好，因为它能准确地告诉你，你的代码中哪些部分没有被逐行覆盖!👍
请注意，Flutter覆盖率和覆盖率沟槽都使用
lcov.info文件来显示覆盖率数据。所以你应该在做完修改后重新运行flutter test --coverage，以看到更新的数据。
当一起使用时，Flutter Coverage和Coverage Gutters帮助你看到你的代码中哪些部分需要更多的测试。
它们使编写测试更加有趣和有价值，因为将覆盖率提高到100%感觉很好✅
结语
现在我们知道了如何生成测试覆盖率并充分利用可用的VSCode扩展，还有一件事要说。
单纯的代码覆盖率并不是一个银弹。
编写测试需要时间（尽管还不如手动测试整个应用程序，一遍又一遍😱），所以我们应该选择一个有意义的测试策略。
单元测试、部件测试和集成测试的良好组合可能是最有效的。而且根据项目的情况，包括E2E和黄金图像测试也可能是有意义的。
