はじめに
実務においてテストカバレッジをHTML形式で出力してスクリーンショットを撮り、プルリクエストに添付することはよくあることだと思います。
すでに環境が整っていた中で何気なく行っていたのですが、プライベートの環境でも構築してみたいと思い取り組んでみたところ簡単に導入できました。
今回はその導入手順を紹介したいと思います。
なお最初に通常の手順でテストカバレッジを出力する方法を紹介し、次に効率化した方法を紹介します。
記事の対象者
- テストカバレッジを出力してみたい方
- カバレッジを効率よく出力したい方
記事を執筆時点での筆者の環境
- macOS 14.3.1
- Xcode 15.2
- Swift 5.9
- iPhone11 pro ⇒ iOS 17.2.1
- Flutter 3.19.0
- Dart 3.3.0
- Pixel 7a ⇒ Android
1. テストカバレッジを出力する手順
以下は前提条件です。
- IDEはVSCodeである
- プロジェクトを開いている
- テストコードが書いてある
- HomeBrewがインストールされている
1-1. lcovのインストール
カバレッジデータを収集し、それを見やすいHTMLレポートに変換することができるツールをHomeBrew経由でインストールします。
以下のコマンドをターミナルで実行します。
brew install lcov
1-2. テストを実行
カバレッジレポートを出力するオプションをつけて以下のコマンドをターミナルで実行します。
flutter test --coverage
1-3. lcovツールでカバレッジレポートから特定のファイルを除去
Flutterでの開発の場合、riverpodやfreezedなど自動生成系のパッケージはよく使っていると思います。
自動生成ファイルはテストカバレッジに含めたくないので、自動生成ファイルを除いた新しいカバレッジレポートnew_lcov.infoを以下のコマンドをターミナルで実行して生成します。
念の為、自動生成ファイルがなかった場合に備えて--ignore-errors unused オプションを追加することで、パターンに一致するファイルがない場合でもエラーを無視するように設定します。
lcov --remove coverage/lcov.info 'lib/**.g.dart' -o coverage/new_lcov.info --ignore-errors unused
プロジェクトで自動生成系を使っていなければここは実行しなくても良いです。
1-4. genhtmlツールでHTML形式に変換
locvに含まれるgenhtmlツールを使って以下のコマンドをターミナルで実行します。
生成されたカバレッジレポートnew_lcov.infoをHTML形式に変換し、coverage/htmlフォルダに出力します。
genhtml coverage/new_lcov.info -o coverage/html
ここまでくると、以下の画像の内容でファイル達が出来上がっているはずです。
1-5. カバレッジレポートをブラウザで表示
以下のコマンドを実行すると生成されたHTML形式のカバレッジレポートをデフォルトのブラウザで開きます。
open coverage/html/index.html
以下のように表示されます。
テストは一つしか書いてないので、悲惨なカバレッジです😨
2. derryを使って効率よく出力する
上記のコマンドを毎回打つのは正直面倒ですよね。
そこで、derryというパッケージを使ってプロジェクトにスクリプトを作って一連の処理を一つのコマンで実行できるようにします。
スクリプトとは、コンピュータに一連の命令を実行させるための処理で、手作業で行う複数のステップを自動化できます。
2-1. derryをPCにインストール
derryをシステム全体で利用可能なコマンドラインツールとしてインストールします。
dart pub global activate derry
2-2. パスを通す
上記コマンドでパスが通るはずですが、通っていない場合も考えて確認します。
まずはターミナルのホームディレクトリで以下を実行して、.zshrcファイルまたは.bashrcを開きます。
open .zshrc
または
open .bashrc
そして以下の記述がなければ追記します。
export PATH="$PATH":"$HOME/.pub-cache/bin"
2-3. プロジェクトにderryをインストール
以下コマンドをターミナルにてプロジェクトのディレクトリで実行します。
flutter pub add derry
ファイルを保存して閉じます。
2-4. スクリプトを書く
pubspec.yamlに使いたいスクリプトを書きます。
コロン： の左辺にコマンド名、右側に実行するコマンドを書いていきます。
今回はコマンド名をcovにしましたが、ここはみなさんの使いやすいように変更してみてください。
コマンドの部分は１番目のコマンドを書いたら、半角スペース && 半角スペースで続きの２番目のコマンド…
というように書いていきます。
今回でいくと次のような順番で実行するスクリプトになります。
- テストを実行
-
lcovツールでカバレッジレポートから特定のファイルを除去 -
genhtmlツールでHTML形式に変換 - カバレッジレポートをブラウザで表示
上記をまとめると以下のようになります。
scripts:
cov: flutter test --coverage && lcov --remove coverage/lcov.info 'lib/**.g.dart' -o coverage/new_lcov.info --ignore-errors unused && genhtml coverage/new_lcov.info -o coverage/html && open coverage/html/index.html
pubspec.yamlの全文はこちら
name: components_sample
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=3.2.5 <4.0.0'
dependencies:
flutter:
sdk: flutter
flutter_hooks:
cupertino_icons: ^1.0.6
gap:
derry: ^1.5.0
dev_dependencies:
flutter_test:
sdk: flutter
custom_lint:
flutter_lints: ^3.0.0
very_good_analysis: ^5.1.0
flutter:
uses-material-design: true
# 🤚 ここにスクリプトを記入する 🖐️
scripts:
cov: flutter test --coverage && lcov --remove coverage/lcov.info 'lib/**.g.dart' -o coverage/new_lcov.info --ignore-errors unused && genhtml coverage/new_lcov.info -o coverage/html && open coverage/html/index.html
スクリプトの定義を別のyamlファイルに記述することもできます。
詳しくは公式の API Documentation をご覧ください
2-5. コマンドを実行してみる
ターミナルで以下を実行してみます。
derry cov
すると以下のような挙動でテスト実行からブラウザ展開まで行ってくれます。
2-6. 余談：スニペットとしても使える
よく使うコマンドのスニペットとしても使えます。
以下で紹介しているbr と gcはともに１つのコマンドですが、ショートカットコマンドとして登録しています。
scripts:
# build_runnerを実行して、同じファイル名があれば古いものを削除する
br: flutter pub run build_runner build --delete-conflicting-outputs
# Gradle デーモンプロセスを終了する => ビルドエラーの解消
gc: pkill -f '.*GradleDaemon.*'
# テストを実行しカバレッジをHTMLで出力してブラウザで開くスクリプト
cov: flutter test --coverage && lcov --remove coverage/lcov.info 'lib/**.g.dart' -o coverage/new_lcov.info --ignore-errors unused && genhtml coverage/new_lcov.info -o coverage/html && open coverage/html/index.html
終わりに
この記事では、テストカバレッジを出力する方法と、それを効率化するためのツールと手段について説明しました。
これらの手順とツールを活用することで、テストカバレッジの確認と管理が簡単になります。
この記事が誰かのお役に立てれば幸いです。
参考記事