FlutterのUnitTestレポートを見やすくしたい
訳あって最新版を使っていません(macをCatalinaにアップデートできない==Xcodeの最新版を入れられないので)。
従って、バージョン違いによる不動作などあるかも知れません。お気づきの点があったら是非コメント下さい。
$ flutter --version
Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (4 months ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0
Flutterテストの標準出力
flutter test
でそのまま出力すると、こんなレポートがコンソールに流れます。
00:08 +26: ... MainPageのテスト CalendarWidgetのチェック
00:08 +26 -1: /workspace/flutter/Recorder/test/data/Record_test.dart:
Recordクラス static関数テスト 強制FailTest [E]
Expected: false
Actual: <true>
package:test_api expect
package:flutter_test/src/widget_tester.dart 234:3 expect
data/Record_test.dart 15:7 main.<fn>.<fn>
00:09 +34 -1: ... MainPageのテスト Widgetのチェック
00:09 +35 -1: ... MainPageのテスト Widgetのチェック
00:09 +35 -1: ... MainPageのテスト フッターのチェック
00:09 +36 -1: ... MainPageのテスト フッターのチェック
00:09 +36 -1: ... MainPageのテスト セルのタップで入力画面に遷移
00:10 +36 -1: ... MainPageのテスト セルのタップで入力画面に遷移
00:10 +37 -1: ... MainPageのテスト セルのタップで入力画面に遷移
00:10 +37 -1: Some tests failed.
が、どうやらテストファイル毎に別スレッドで実行されているらしく、出力される順番がなんだかグチャグチャです。
そしてそのせいか、テスト名がおかしなことになっています。
とりあえず、実行したテストの数は合っているようですし、失敗数や成功数も分かりますが・・・
これでは、本当に失敗しているテストの名前が合っているか、確認が必要です。
非常に見づらい!
ということで、人間の目で見やすいテストレポートを出せないか探してみました。
jsonで出力する
実は、デフォルトで、json形式で吐いてくれるオプションがあります。
$ flutter test --machine
です。
そのままだと、コンソールにjsonをひたすら吐かれるので、まあ一応、リダイレクトでファイルに出すのが良いでしょうね。
$ flutter test --machine > machine.log
jsonファイルなんで、JsonViewer
とかブラウザに拡張機能などを入れていれば、一応読めなくはないです。でも、失敗したテストを探すのは大変そうです。
コンソール上で分かりやすく出力する
dart_dot_reporterというパッケージと使うと、--machine
オプションで出したjsonを元に、コンソールに成功テストと失敗テストの数を分かりやすく出してくれます。
1.インストール
Installingのタブにあるとおりにインストールしましょう。
$ flutter pub global activate dart_dot_reporter
これだけ。
2.使う
まず--machine
オプションでjsonを出力して、それをツールに渡します。
$ flutter test --machine > machine.log || echo 'Tests done.'
flutter pub global run dart_dot_reporter machine.log
結果はこんな感じになります。
色も付いて、エラーになったテスト関数も分かって、なかなか良いです。
--show-message
オプションを付けると、もう少し詳しく出してくれます。
とりあえず個人で開発していて失敗テストの有無、その関数名が分かれば良い程度だったら、十分使えそうです。
xmlで出力する
CIで回すことを考えると、Junitのようなxmlレポートが欲しいことがあるでしょう。
そんなときは、junitreportというパッケージが使えます。
1.インストール
まずDartパッケージをインストールします。
$ flutter pub get
$ flutter pub global activate junitreport
ここで、二つ目のコマンドの時に、何やら次のようなメッセージが出るかと思います。
Warning: Pub installs executables into /develop/flutter/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):
export PATH="$PATH":"/develop/flutter/.pub-cache/bin"
pathの詳細はflutterのSDKを実際にインストールしている場所によって変わりますが、要するに、PATHを追加しろと言っています。
ので、素直に追加して上げましょう。
なお、これだけでは足りなくて、次も足した方が良いようです。
<flutter SDKのインストールpath>/bin/cache/dart-sdk/bin
.bash_profile
はこうなりました。(※当方Macです)
export PATH=$PATH:/develop/flutter/bin
export PATH=$PATH:/develop/flutter/bin/cache/dart-sdk/bin
export PATH=$PATH:/develop/flutter/.pub-cache/bin
ターミナルを再起動するか、source
コマンドで反映させて下さいね。
2.使う
このパッケージも、--machine
オプションで出したjsonを使います。
flutter test --machine | tojunit --output <Your output file>.xml
これでxmlを書き出してくれます。
xmlファイルを解析してテスト結果を表示してくれるCIツールならば、これがあれば十分ですね。
htmlで書き出す
CIツールがxml形式のテスト結果のビューページを表示してくれない場合(Github ActionsとかGithub Actionsとか)、人間の目にもっと見やすいhtml形式が欲しい物ですね。
出来ればGradleが出してくれるようなのが慣れていていいですが、取り敢えず多くは望まないことにします。
junit2htmlというのを使ってみます。
1.インストール
ソースコードを落としてきてPythonを実行するのでも良いですが、Macなのでpip
を使ってインストールすることにします。
$ sudo pip install junit2html
2.使う
$ junit2html JUNIT_XML_FILE [NEW_HTML_FILE]
[JUNIT_XML_FILE]
には、junitreportで出力したxmlファイルを指定します。
出力されたhtmlは、こんな感じです。
※すみません、完全に個人の趣味で作っているアプリで、恥ずかしいのでいろいろ推測されそうなパッケージ名ぼかしてます(汗)
失敗テストを探すのはちょっと大変ですが、一応人間の目で見やすくなりました。
失敗テストはこんな風な表示です。
junit xmlをhtmlに変換するツールは探せば他にもありそうなので、お好みな物を探してみるのもいいでしょうね。とはいえ、xunit-viewerくらいしか見つけられなかったですが。
テストスクリプトにする
dart_dot_reporterとhtmlへの出力を合わせ技で全部やってみようと思います。
この場合、スクリプトにしておかないといちいちコマンド打つのは大変です。
ルート直下にtest.sh
というファイルを作成して、次のようにしました。
#!/bin/sh
mkdir -p ./test-reports/ 2>/dev/null
flutter test --machine > machine.log
cat machine.log | tojunit --output ./test-reports/TEST-results.xml
echo 'Tests done.'
flutter pub global run dart_dot_reporter machine.log
junit2html ./test-reports/TEST-results.xml ./test-reports/index.html
これで、スクリプトを実行すればflutterのUnitTest/WidgetTestを実行して、コンソールとhtmlファイルにレポートを出力できるようになりました。
感想
Gradleって優秀だなあ・・・個人的には、html形式のテストレポートでは、Gradleが吐き出すのが一番見やすいと思ってます。次がJenkins。htmlファイルを吐いてくれるわけじゃないですが、結果ページが見やすいですよね。
さて、CIツールどこに登録しようかな。
軽く調べた感じだと、Flutterに対応しているのはBitriseだけっぽい?
まあ、LinuxやmacOSのイメージ上でコマンドレベルで全部インストールしてやっていけばCircleCIでもGithub Actionsでも出来ないこと無いんでしょうけど^^;
CDまで考えると、Bitriseが一番良さそうではありますが、フリープランだと実行時間が10分制限あるし(Androidのエミュレーターテストまで入れるとゆうに超える)、それ以上のプランだとそこそこお金がかかるので、広告入れたとしても多分ペイできない・・・ぶつぶつ・・・
参考
Flutter Test Reports : Current state of art
https://medium.com/ideas-by-idean/flutter-test-reports-in-cis-current-state-of-art-8968b0c8dd4a
Author And Source
この問題について(FlutterのUnitTestレポートを見やすくしたい), 我々は、より多くの情報をここで見つけました https://qiita.com/kasa_le/items/3ce281bf713404a4e8c8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .