SonarQube で Jest のカバレッジレポートを表示する GitLab CI の設定

昨日 に引き続き、GitLab CI と SonarQube (SonarCloud) の設定の話です。 今日は Jest のカバレッジレポートを SonarQube で表示します。

設定方法

以下の2つのファイルを編集します。

1. sonar-project.properties
2. .gitlab-ci.yml

sonar-project.properties

以下の行を追加します。

sonar.javascript.lcov.reportPaths=coverage/lcov.info

.gitlab-ci.yml

以下の設定を行います。

1. Jestのテスト時にカバレッジレポートを出力する
2. 出力されたレポートを SonarQube (sonar-scanner) が読み取れるようにする

1. カバレッジレポート出力

Jest でのカバレッジレポート出力は —coverage オプションの追加で行います。

設定例:

test:
  script:
  - npm install
  - npm run test -- --coverage

2. 出力されたレポートの読み取り

出力されたレポートの読み取りのためには、以下2つの設定が必要です。

1. テストのジョブでレポートを成果物 (artifact) として保存するようにする
2. テストのジョブと Sonar のジョブが (並列ではなく) 順番に実行されるように設定する

2.1. レポートの保存

テストのジョブでレポートを成果物 (artifact) として保存するには artifacts.paths に coverage フォルダを指定します。

設定例:

test:
  script:
  - npm install
  - npm run test -- --coverage
  artifacts:
    paths:
    - coverage

2.2. 順次実行設定

テストのジョブと SonarQube連携用ジョブが (並列ではなく) 順番に実行されるように設定するには、stage の設定を行います。

具体的には、以下のように stages を定義して

stages:
  - test    #テスト実行ステージ
  - report  #SonarQube連携用ステージ

それぞれのジョブで stage を指定します。

test:
  stage: test #テスト実行ステージ
  script:
  - npm install
  - npm run test -- --coverage
  artifacts:
    paths:
    - coverage

sonarcloud-check:
  stage: report #SonarQube連携用ステージ
  image:
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]

確認

CI/CDのパイプラインが成功すれば SonarQube (SonarCloud) でこんなふうにカバレッジが確認できます。