Flutter: Code Coverage tools in VS Code
When you work on a Flutter/Dart project where code coverage is measured or even enforced, then you will likely want to have a setup that will help you see the picture locally.
One way is to run tests collecting the coverage with a terminal command or some script, i.e. flutter test --coverage, see more info on Flutter CLI here.
However, if you primarily use VS Code, then you can utilize a more convenient launch configuration to be able to run your tests and generate the coverage right from the tests themselves. More specifically, we would need to use a custom codelens configuration.
‘Coverage’ codelens launch configuration in VS Code
As soon as the following configuration is added to the launch.json file, a new button will be made available to allow us to run the tests.
After executing the ‘Coverage’ command on a test(s), you will notice the lcov.info file appearing in the coverage directory.
Be aware of this issue if you’re trying to make it work on a plain Dart (non-Flutter) package.
VS Code Extensions for Code Coverage
While various tools exist that can generate HTML reports based on coverage files, analyzing coverage directly in VS Code can be accomplished using the following two extensions:
- Flutter Coverage
This extension adds a tree view to the test view container. It shows the coverage per file/folder. - Coverage Gutters
Displays which lines of a file are covered and which are not.
Conclusion
For VS Code users, custom codelens configurations and specific extensions can provide coverage analysis directly within the editor, simplifying the process significantly.
Resources
- https://dartcode.org/docs/launch-configuration/
- https://dartcode.org/docs/custom-codelens/
- https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage
- https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters
- https://github.com/dart-lang/test/issues/1265#issuecomment-644995230
