2024/06/13
Looker Studioでテストカバレッジを可視化する
はじめに
Looker Studio は、様々なデータソースからデータを収集し、使いやすいダッシュボードを作成できるツールです。今回は、Looker Studio で Jest で出力されたテストカバレッジを可視化する方法を紹介します。本記事は、 Jest を用いてテストコードを作成し、カバレッジレポートの生成経験をお持ちの方向けです。
Jest のカバレッジレポートを CSV 形式に変換する
jest コマンドを使用して、テストを実行しカバレッジレポートを生成します。
$ npx jest --coverage --coverageReporters=json-summary --collectCoverageFrom="src/**/*.js"
PASS src/sum.test.js
✓ adds 1 + 2 to equal 3 (2 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.653 s
Ran all test suites.
$ npx -y jest-coverage-to-csv coverage/coverage-summary.json
Conversion to CSV success!
- jest コマンドに
--collectCoverageFrom="src/**/*.js"オプションをつけてテストコードが存在しないソースコードもカバレッジに含まれるようにします。このようにすることでソースコード全体のカバレッジが確認できるようになります - BigQueryに取り込むためにCSV形式のデータが必要です。 jest のカバレッジレポートの出力形式はいくつかありますが、CSV形式はサポートされていません。そのため、jest コマンドに
--coverageReporters=json-summaryをつけて一旦json形式で出力後、 jest-coverage-to-csv を使ってCSV形式に変換します
生成された coverage/coverage-summary.csv ファイルは、後で使用するために保存しておきます。
今回は日毎のカバレッジの推移を確認したいので下記の内容の2日分のファイルを日付付きのファイル名にリネームして保存したとして進めます。
coverage/coverage-summary_2024-06-12.csv
coverage/coverage-summary_2024-06-13.csv
6/12時点のテストカバレッジ
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 50 | 100 | 50 | 50 |
sub.js | 0 | 100 | 0 | 0 | 2-4
sum.js | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.362 s, estimated 1 s
6/13時点のテストカバレッジ
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
sub.js | 100 | 100 | 100 | 100 |
sum.js | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 2 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 0.633 s, estimated 1 s
CSVファイルをBigQueryに取り込む
gcloud CLI に含まれている BigQuery 用のコマンドラインツールである bq コマンドを使用して、先ほど保存した CSV ファイルを BigQuery のテーブルとして取り込みます。
$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-12 ./coverage/coverage-summary_2024-06-12.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_rc3c57bf6bd57867_000001900f7f57cc_1 ... (0s) Current status: DONE
$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-13 ./coverage/coverage-summary_2024-06-13.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_r7ca5c1fd8e62ebaf_000001900f7f98e3_1 ... (0s) Current status: DONE
- あらかじめ gcloud コマンドで BigQuery にデータを書き込める権限があるアカウントでログインしている必要があります
- 取り込み先のデータセット、今回の例では
coverage_sample.report_2024-06-12の.より前の部分は、あらかじめ作成しておく必要があります - CSVのヘッダーのカラム名にスペースが含まれているため、スキーマの自動認識機能は使用せず、bq コマンドのオプションとして指定します(
statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING)
処理が完了してDONEと表示されたら、BigQuery コンソールでテーブルが確認できます。
BigQuery コンソール上でワイルドカードテーブルを使った View を作成する
BigQuery のコンソールにアクセスすると先程取り込んだ2つのテーブルにテストカバレッジ情報が取り込まれていることが確認できます。
下記の SQL をコンソール上で実行して2つのテーブルをまとめた View を作成します。
CREATE VIEW
`coverage_sample.view_report` AS (
SELECT
_TABLE_SUFFIX AS date,
*
FROM
`coverage_sample.report_*`)
- From 句に*を指定するワイルドカードテーブル機能を使うことで複数のテーブルを1つの View にまとめられます
- このままだとどの日付のデータなのかが区別つかなくなるので、_TABLE_SUFFIX 疑似列を使ったカラムを追加します。_TABLE_SUFFIX にはワイルドカードにマッチした文字列、ここでは
2024-06-12と2024-06-13が入ります。このように設定しておくことで後日、2024-06-14のデータが追加されても自動で View に追記することができます
Looker Studio でグラフや表を作成する
https://lookerstudio.google.com/reporting にアクセスして新しいレポートを作成します。
データに接続タブで BigQuery を選択して先程のデータセットの View を選択します。
空のダッシュボードが作成されるので、右側のグラフ→設定タブで
ディメンション：date
指標：statements_ratio
並べ替え：dateで昇順
フィルター：All Files
と選択すると、日毎のステートメントカバレッジの%の表が作成されます。 次に表をコピーしてグラフを作成します。選択した状態で右側のグラフのプルダウンで表やグラフの種類の変更ができます。今回は折れ線グラフを選択してみます。
下記のような表とグラフでテストカバレッジの日毎の推移を確認できるダッシュボードが作成できました。
まとめ
Jest のカバレッジレポートを集計可能な形式に変換するところが苦労しましたが、 BigQuery に取り込むことができれば表やグラフで可視化することが簡単にできることがわかりました。
今回の記事では説明できませんでしたが、カバレッジレポートを取得して BigQuery に取り込むところまでを GitHub Actions で実行するようにすれば、自動で新しい日毎のデータが取り込めるようになります。常に最新のカバレッジを確認できる状態を維持することで、チームメンバーのテストコードを書く意識が高まると思います。
みなさまのプロジェクトでも是非活用してみてください。
参考リンク
Author Profile
SHARE
