生成一份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

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

bash 复制代码
# 生成 `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扩展,还有一件事需要说明:

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

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

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

相关推荐
孤鸿玉12 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥18 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart