Flutterテストカバレッジ入門
はじめに
Flutterアプリの品質を高めるためには、テストカバレッジをしっかりと把握することが重要です。テストカバレッジとは、テストがコードベースのどれだけの部分を実際にカバーしているかを示す指標です。この記事では、Flutterアプリのテストカバレッジを計測し、レポートを生成する方法を紹介します。
テストカバレッジとは?
テストカバレッジとは、テストがコードのどの部分を実行しているかを測定する指標です。これによりテストの網羅性を評価し、テストが不足している部分を特定することができます。高いテストカバレッジは、コードの品質と信頼性を保証する一つの指標となります。
ただし、安易にテストカバレッジ100%などの目標を設定すると、カバレッジを上げるために不要なテストを書いてしまったり、テスト本来の目的である品質向上からずれてしまう危険性もあるため、カバレッジは一つの努力目標とした方がよいと思います。
Flutterでのテストの実行
Flutterプロジェクトでテストを実行するには特別な設定は必要ありません。
以下のコマンドで、テストを実行しながらカバレッジデータを収集します。
flutter test --coverage
コマンドを実行してテストが成功すると、プロジェクトのルートディレクトリにcoverageというディレクトリが自動的に生成され、その中にカバレッジデータが保存されたlcov.infoファイルが生成されます。
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/4b191c53556e472b93a1cd4b5f2cf855/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-06-26%2010.17.56.png?fm=webp)
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/2b175782ff7c49758d784e8b78044cd2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-06-26%2010.21.03.png?fm=webp)
しかし、lcov.infoを開いてもそのままでは読むことができません。
そこで、次の項目ではgenhtmlというツールを使ってlocv.infoを見やすい形に変換し、HTML形式のレポートを作成します。
テストカバレッジの計測とレポートの生成
生成されたlcov.infoファイルを使って、テストカバレッジのレポートを作成するにはgenhtmlというツールを使用します。
genhtmlはLCOV形式のカバレッジデータをHTML形式に変換するためのツールです。
genhtmlコマンドを使用して、先ほど生成したlcov.infoファイルからHTML形式のカバレッジレポートを生成します。
まず、genhtmlをインストールします。
brew install lcov # Macの場合
次に、以下のコマンドでlcov.infoファイルからHTMLレポートを生成します:
genhtml -o coverage coverage/lcov.info
このコマンドを実行すると、coverageディレクトリ内にHTML形式のレポートが生成されます。
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/722b56a49e2b457db3dd3271fb988f86/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-06-26%2010.25.39.png?fm=webp)
カバレッジレポートの読み方
生成されたカバレッジレポート(index.html)をブラウザで開きます。
レポートには、以下の情報が含まれます。
- 全体のカバレッジ率: プロジェクト全体のテストカバレッジ率を示します。
- ファイルごとのカバレッジ: 各ファイルのカバレッジ率と、どの行がテストでカバーされているかを示します。
例えば、以下のようなHTMLレポートが生成されます。
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/ac46ab5eee564ff18133f0650670fa5e/Flutter%E3%83%86%E3%82%B9%E3%83%88%E3%82%AB%E3%83%8F%E3%82%99%E3%83%AC%E3%83%83%E3%82%B7%E3%82%99%E5%85%A5%E9%96%80%EF%BC%BF3.png?fm=webp)
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/4dc5138dd1d646149c23fb2efe26402d/Flutter_4.png?fm=webp)
HTML形式にしたことで、とても見やすくなりました。
今回はテストコードが少ないため、Functionsなどは対象となっていませんが、単体テストなどを追加することで全体のカバレッジを把握することができます。
また、ソースコードの各行についてどの部分がテストできているかが視覚的に把握できるようになっています。
カバレッジ対象からの除外
場合によってはコードの一部をテストカバレッジの対象から除外したい場合があると思います。そのような場合は、カバレッジから除外したい箇所に以下のように特殊なコメントをすることで実現することができます。
- 指定の一行だけを除外する
if (value > 10) { print(‘value = $value’); // coverage:ignore-line }
- 特定の範囲を除外する
// coverage:ignore-start if (value > 10) { print(‘value = $value’); } // coverage:ignore-end
- ファイル全体を除外する(ファイルの先頭に記載してください)
// coverage:ignore-file import ‘dart:main’; void main() { /* code … */}
テストカバレッジのためのツール
Flutter開発でVSCodeを使用している場合は以下のエクステンションが便利です。
- Coverage Gutters
https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters
このエクステンションを使用すると、エディタ上でコードのどの部分がテストでカバーされているのかを色付きで表示することができます。
下記の画像では、画面左端が緑色の部分がテストでカバーできており、赤色の部分はテストでカバーされていない部分を示しています。
![](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/412918337bf74825bef5dd82e8bb05ff/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-06-26%2010.26.56.png?fm=webp)
- Flutter Coverage
https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage
このエクステンションを使用すると、カバレッジレポートを作成せずに、エディタ上で各ディレクトリやファイルのカバレッジ率を把握することができます。
まとめ
Flutterアプリの品質を向上させるためには、テストカバレッジを計測し、定期的に評価することが重要です。本記事では、Flutterでのテストカバレッジの設定方法とレポートの生成、読み方などについて解説しました。テストカバレッジを活用して、より信頼性の高いアプリケーションを開発しましょう。
この記事を書いた人
![浅野 翔太](https://images.microcms-assets.io/assets/0b7e26d405ac43a2bb794b29dd552427/cb2471fbe2f540f5b5fa0cd9cf4dc40c/BEMA%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3_%E6%B5%85%E9%87%8E%E7%BF%94%E5%A4%AA%E3%81%95%E3%82%93.jpeg)
関連記事
- 画像のカラー抽出を頑張った話。
狩野真毅
- 3Dの第一歩、Blenderを活用してひとつ先の未来へ
スーパーたけちゃんマン