Flutterテストカバレッジ入門

スキルアップ

浅野翔太

2024年06月26日

はじめに

Flutterアプリの品質を高めるためには、テストカバレッジをしっかりと把握することが重要です。テストカバレッジとは、テストがコードベースのどれだけの部分を実際にカバーしているかを示す指標です。この記事では、Flutterアプリのテストカバレッジを計測し、レポートを生成する方法を紹介します。

テストカバレッジとは？

テストカバレッジとは、テストがコードのどの部分を実行しているかを測定する指標です。これによりテストの網羅性を評価し、テストが不足している部分を特定することができます。高いテストカバレッジは、コードの品質と信頼性を保証する一つの指標となります。

ただし、安易にテストカバレッジ100%などの目標を設定すると、カバレッジを上げるために不要なテストを書いてしまったり、テスト本来の目的である品質向上からずれてしまう危険性もあるため、カバレッジは一つの努力目標とした方がよいと思います。

Flutterでのテストの実行

Flutterプロジェクトでテストを実行するには特別な設定は必要ありません。

以下のコマンドで、テストを実行しながらカバレッジデータを収集します。

flutter test --coverage

コマンドを実行してテストが成功すると、プロジェクトのルートディレクトリにcoverageというディレクトリが自動的に生成され、その中にカバレッジデータが保存されたlcov.infoファイルが生成されます。

しかし、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形式のレポートが生成されます。

カバレッジレポートの読み方

生成されたカバレッジレポート(index.html)をブラウザで開きます。

レポートには、以下の情報が含まれます。

全体のカバレッジ率: プロジェクト全体のテストカバレッジ率を示します。
ファイルごとのカバレッジ: 各ファイルのカバレッジ率と、どの行がテストでカバーされているかを示します。

例えば、以下のようなHTMLレポートが生成されます。

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
このエクステンションを使用すると、エディタ上でコードのどの部分がテストでカバーされているのかを色付きで表示することができます。
下記の画像では、画面左端が緑色の部分がテストでカバーできており、赤色の部分はテストでカバーされていない部分を示しています。

Flutter Coverage
https://marketplace.visualstudio.com/items?itemName=Flutterando.flutter-coverage
このエクステンションを使用すると、カバレッジレポートを作成せずに、エディタ上で各ディレクトリやファイルのカバレッジ率を把握することができます。