KarmaやJestのカバレッジをAzureDevOpsパイプラインで収集してみた

昨日、Azure DevOps Tokyo, Japan 2nd impactに参加しました。

jazug.connpass.com

その時にAzure DevOps パイプラインでのカバレッジレポートの収集の話になり

自分が今使っているAngularのプロジェクトでも、カバレッジレポートが収集できるか試してみました。

現在、自分がAngularで行っているユニットテストは、KarmaとJestの2パターンあるので

その両方で試してみた結果となります。

はじめに

ちと古いですが、昔JestのテストとCIを組んだ構成を利用したので

Angular Cli:7.0.5で試した結果となります。

パイプラインでのカバレッジレポートのPublish

ユニットテストの結果出力同様、テストバレッジの結果出力も、専用のタスクがあるようです。

タスク名は「Publish Code Coverage Results」となっています。

パイプライン構築GUIで見てみると、下図のような設定画面となっているようです。

f:id:TakasDev:20190119232434p:plain

YAMLの設定については下記サイトに記載されています。

Publish Code Coverage Results task - Azure Pipelines | Microsoft Docs

ユニットテスト同様、結果出力されたXMLファイル指定するようです。

XMLのフォーマットとしてCobertura か JaCoCoのどちらかが指定されています。

ざっと調べてみたところ、JestもKarmaもCobertura フォーマットのXMLを吐けるようなので

Cobertura フォーマットのカバレッジレポートをパイプラインでPublishしようと思います。

Jest

Jest自身がCoberturaフォーマットのカバレッジレポートを出力する機能を持っているようなので必要最低限の変更で済みます。

AzureDevOps + Angular + Jestのテストパイプラインについては、以前の記事を参考にしてください

package.json

  "test:watch": "jest --watch",
- "test:ci": "jest --reporters=jest-junit",
+ "test:ci": "jest --reporters=jest-junit --coverage",

   "reporters": [
     "default",
     "jest-junit"
   ],
+ "coverageReporters": [
+   "text",
+   "html",
+   "cobertura"
+ ]

上記の設定で、npm run test:ciを実行すると、テスト実行時にcoverageディレクトリにカバレッジレポートが出力されます。

f:id:TakasDev:20190119234741p:plain

Karma

Karmaも簡単な変更でカバレッジレポートをcoberturaフォーマットで出力できるようになります。

angular.json

  "karmaConfig": "src/karma.conf.js",
+ "codeCoverage": true,
  "styles": [
     "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
     "src/styles.scss"

karma.conf.js

  coverageIstanbulReporter: {
    dir: require('path').join(__dirname, '../coverage'),
-   reports: ['html', 'lcovonly', 'text-summary'],
+   reports: ['html', 'lcovonly', 'text-summary', 'cobertura'],
    fixWebpackSourcePaths: true
  },

karma側も同様の構成でカバレッジの結果が出力されます。

f:id:TakasDev:20190120000455p:plain

Azure DevOpsパイプライン

Azure DevOps側に戻ってきました。

出力したカバレッジレポートのXMLとレポートHTMLを取得するタスクを作成します。

KarmaもJestも、同じ名前のディレクトリに同じ名前のファイルでXML出力されているので同様の設定となります。

タスクのyamlは下記の通りです。

yaml

- task: PublishCodeCoverageResults@1
  displayName: 'Publish code coverage from $(System.DefaultWorkingDirectory)/**/cobertura-coverage.xml'
  inputs:
    codeCoverageTool: Cobertura

    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/cobertura-coverage.xml'

    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

codeCoverageTool : 今回Coberturaフォーマットを使用したのでCoberturaを指定します。
summaryFileLocation : 出力されたXMLファイルを指定します。
reportDirectory : カバレッジのHTMLレポートのディレクトリを指定できます。