生成一份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扩展,还有一件事需要说明:

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

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

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

相关推荐
lqj_本人2 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人5 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔9 小时前
Flutter启动流程(2)
flutter
hello world smile13 小时前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人13 小时前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai13 小时前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人13 小时前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人13 小时前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile14 小时前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
lqj_本人17 小时前
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
flutter·harmonyos