If you're writing non-trivial apps, adding automated tests is one of the best investments you can make.
Automated tests help you write better code, catch regressions early, and refactor confidently. They even save you a lot of time compared to testing your app manually, over and over. 😱
And with Flutter, it is easy to generate and visualize test coverage for your entire app or package, all the way down to each line of code in your project.
So in this article we'll learn how to:
- use the
flutter test --coveragecommand - analyze the test report
- see the test coverage right in VSCode with the Flutter Coverage and Coverage Gutters extensions
Ready? Let's get started!
The Flutter test --coverage command
Suppose you have written some tests and want to get an idea of test coverage in your project.
All you have to do is to run these three commands:
# 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
The generated HTML report will create a lot of files. To avoid checking them in to git, add
coverage/to your.gitignorefile.
This will generate the report and open a page on your browser that looks like this:
From here, you can drill into each directory and open each file individually. Example:
What's nice about the file report is that all relevant lines are color-coded (blue: covered, red: not covered).
Note that the report tells you if there are tests that cover a given line, not if those tests pass or not. In other words, you still have to ensure all your tests pass.
While this report is helpful, during development it's not practical to read it in the browser.
Luckily, there are two VSCode extensions to make life easier.
The Flutter Coverage Extension
Once you have installed the Flutter Coverage extension, it will appear in your testing tab and show you the coverage info for all files and folders:
Based on the coverage percentage, you'll also get three different icons showing you which parts of your code need more tests:
- ✅ over 70% coverage
- ⚠️ between 50% and 70% coverage
- ❌ below 50% coverage
But what if you wanted to see test coverage in the code editor itself?
The Coverage Gutters Extension
Once you install the Coverage Gutters Extension, a little Watch button will appear in the bottom bar:
If you click on it, it will check the test coverage info (in the lcov.info file), and you'll see green or red gutters next to each line in the editor:
This is great as it tells you exactly which parts of your code are not covered on a line-by-line basis! 👍
Note that both the Flutter Coverage and Coverage Gutters use the
lcov.infofile to show the coverage data. So you should re-runflutter test --coverageafter making changes to see the updated data.
When used together, Flutter Coverage and Coverage Gutters help you see which parts of your code need more tests.
They make writing tests more fun and rewarding, too, since getting coverage to 100% feels good! ✅
Conclusion
Now that we know how to generate test coverage and make the most of the available VSCode extensions, there is one thing left to say:
Code coverage alone is not a silver bullet.
Writing tests takes time (though not nearly as much as testing the entire app manually, over and over 😱), so we should choose a testing strategy that makes sense.
A good combination of unit, widget, and integration tests can be most effective. And depending on the project, it may make sense to include E2E and golden image tests too.
Flutter Foundations Course Now Available
I launched a brand new course that covers automated testing in great depth, along with other important topics like state management, app architecture, navigation, and much more:
