Cypress と SonarCloud の連携設定

前回に引き続き、Cypress の設定です。

今回は Cypress で実行するE2Eテストでカバレッジレポートを取得し、SonarCloud (SonarQube) に連携してみます。

1.Cypressでのカバレッジ取得

Cypressでカバレッジ取得するためには以下の準備が必要になります。

1. @cypress/code-coverage のインストール
2. cypress/support/index.js と cypress/plugins/index.js の設定
3. 事前インストゥルメント

1.1 @cypress/code-coverage のインストール

以下のコマンドで @cypress/code-coverage をインストールします。

npm install -D @cypress/code-coverage

1.2 cypress/support/index.js と cypress/plugins/index.js の設定

インストールした @cypress/code-coverage をcypress/support/index.js と cypress/plugins/index.js に設定します。

cypress/support/index.js

import '@cypress/code-coverage/support'

cypress/plugins/index.js

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  return config
}

1.3 事前インストゥルメント

Cypressはテスト対象プログラムのインストゥルメント処理を行わないため、別途実施する必要があります。

今回対象としているプログラムは create-react-app で作成した React アプリケーションなのですが、この場合は、 @cypress/instrument-cra を用います。

まず、以下のコマンドで @cypress/instrument-cra をインストールします。

npm install -D @cypress/instrument-cra

次に、package.json に記述されているテスト対象プログラム起動のコマンドに少し手を加えます。

修正前:

  "scripts": {
    "start": "react-scripts start",

修正後:

  "scripts": {
    "start": "react-scripts -r @cypress/instrument-cra start",

参考:

• https://docs.cypress.io/guides/tooling/code-coverage
• https://www.cypress.io/blog/2019/09/05/cypress-code-coverage-for-create-react-app-v3/

2.SonarCloud への連携

ここまでの設定を行うと E2Eテスト実行時にカバレッジレポートが ./coverage/lcov.info に出力されます。 この情報を SonarCloud に連携します。

2.1 SonarCloud側の設定

事前に SonarCloud でサインアップしてプロジェクト作成しておきます。

以下の2ステップで対応できます。

1. 画面の指示に素直に従って、サインアップして、プロジェクトを作成する。 (すでにサインアップ済みで別のプロジェクトが存在する場合は、画面右上の「＋」ボタンで「Analyze new project」とすれば新規プロジェクト作成できます)
2. 解析方法を GitHub Actionsに切り替える。こちらの記事を参考にどうぞ。

2.2 sonar-project.properties の設定

sonar-project.properties に以下の行を追加して、出力されたカバレッジレポートファイルの情報を与えます。

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

5.成果物

今回実際に作ったコードは以下になります：

• https://github.com/ototadana/ci-cd-demo/compare/cb6efa9b3c18e3fa87c0046eecad80e1e757087a..2ceb7a1e27ddbce9e80f385fdb2bd410bd886e64