Reactアプリのテスト結果をCoverallsで表示

概要

下記Qiita記事の続きとなります。

前回は、Reactでカバレッジを計測できるようにしました。
今回は、GitHubActionsを用いて、pushするたびにカバレッジの計測を行い、Coveralls上で結果を表示できるようにします。

1. Coverallsのトークン取得

1.1 Coverallsのアカウントを作成

下記URLからアカウントを作成しgithubアカウントを紐づけます

1.2 リポジトリを紐づけ

https://coveralls.io/repos/newから、カバレッジの計測を行いたいプロジェクトをONにします。

1.3 トークンの取得

DETAILSのリンクを押下すると、トークンが表示されているのでコピーしておきます。

2. githubにトークンの設定

GitHubActionsからCoverallsへ認証が通るようにします

2.1 トークンの設定

• githubプロジェクト内のSettingを押下
• 「Secrets and variables」を開き「Actions」を押下
• 「New repository secret」のボタンを押下
• トークン作成画面にて、Nameには、COVERALLS_REPO_TOKENを入力。Secretには、先ほどコピーしたトークンを貼り付けます。（↓画面参考）

3. GitHub Actionsの設定

GitHub Actionsの設定を行います。
下記のファイルをpushすると、自動でカバレッジの計測が行われます。

3.1 .github/workflows/coveralls.ymlの作成

ブランチ名やコマンドなどは、状況に合わせて書き換えてください。

name: Coveralls

on:
  push:
    branches:
      - master

jobs:
  coveralls:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14.x

      - name: Install dependencies
        run: npm install

      - name: Run tests with coverage
        run: npm test -- --coverage

      - name: Upload coverage to Coveralls
        uses: coverallsapp/github-action@v2.0.0
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          path-to-lcov: ./coverage/lcov.info

3.2 GithubActionの実行

GithubActionが実行されて正常に終了すると緑のチェックマークが付きます。

4. カバレッジの確認

coveralls.io上でカバレッジの内容が確認できるようになります。

おわりに

今回は、Coveralls上でカバレッジの結果が確認できるようになりました。とっても便利ですね。

ここまで読んでいただきありがとうございました。