【GitHub Actions】DenoのカバレッジをCodecovで出す

自分はちょっとした書き捨てのスクリプトのために、よく使う関数をGitHubにまとめて置いています。とりあえずGitHubに置いておけば、rawファイル用のURLを用いてどこからでもimportできるので便利なんですよね。

GitHubに置いたついでに、GitHub ActionsとCodecovを使ってDenoのカバレッジツールを試してみました。

カバレッジとは

Denoには組み込みのテストランナーがあります（deno testコマンド）。コード全体のうち、テストが実行された割合（カバレッジ）を出力してくれる機能もあります（deno coverageコマンド）。
今回は、GitHubと連携してカバレッジを表示してくれるCodecovというサービスを使って、GitHubへのpush時にカバレッジを自動で表示させたいと思います。

GitHub Actionsの設定

/.github/workflows/test.ymlファイル内に設定を書いていきます。

Git Checkout

リポジトリをチェックアウトします。

- name: Git Checkout Module
  uses: actions/checkout@v2

Denoのインストール

GitHub Actions上にDenoをインストールするためのアクションが存在します。
少し前までdenolib/setup-denoというコミュニティ作成のアクションが主流だったのですが、今は新しく公開された公式のdenoland/setup-denoを使うことが推奨されています。

- name: Use Deno
  uses: denoland/setup-deno@v1
  with:
    deno-version: v1.x

テスト＆カバレッジ収集

deno testコマンドでカバレッジを出すことができます。

- name: Test
  run: deno test -A --coverage=coverage

上記のコマンドを実行すると、/coverage/ディレクトリにカバレッジのデータが出力されます。

lcovファイルの出力

deno coverageコマンドでlcovファイルが出力できます。

- name: Create coverage report
  run: deno coverage ./coverage --lcov > coverage.lcov

上記のコマンドを実行すると、/coverage/ディレクトリのデータからlcovファイルを作成し、coverage.lcovに吐き出してくれます。

Codecov

ファイルをCodecovにアップロードします。
Codecov公式のアクションを利用します。

- name: Codecov
  uses: codecov/codecov-action@v1.5.2
  with:
    file: ./coverage.lcov
    fail_ci_if_error: true

その他

ついでに、リンター、フォーマッター、型チェックのコマンドも実行したいと思います。

- name: Format # フォーマッター
  run: deno fmt --check
- name: Lint # リンター
  run: deno lint
- name: Type Check # 型チェック
  run: deno test --no-run $(find . -regex '.*\.\(js\|ts\|jsx\|tsx\|mjs\|mjsx\)' -printf '%p ')

GitHub Actionsではファイル名のglob展開が使えないようだったので（調べれば使える方法があるのかもしれませんが）、型チェックのファイル指定にはfindコマンドを使用しています。
全てのファイルを型チェックしていますが、（Worker用のファイルがあるなど）この挙動が望ましくない場合は適宜変更してください。

最終的に完成したのが次のファイルです。

/.github/workflows/test.yml

name: Format & Lint & Type Check & Test & Coverage

# push時とpr時に実行
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Git Checkout Module
        uses: actions/checkout@v2
      - name: Use Deno
        uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x # 最新バージョンを使用
      # フォーマッタ
      - name: Format
        run: deno fmt --check
      # リンター
      - name: Lint
        run: deno lint
      # 型チェック
      - name: Type Check
        run: deno test --no-run $(find . -regex '.*\.\(js\|ts\|jsx\|tsx\|mjs\|mjsx\)' -printf '%p ')
      # カバレッジ計測
      - name: Test
        run: deno test -A --coverage=coverage
      # lcovファイル出力
      - name: Create coverage report
        run: deno coverage ./coverage --lcov > coverage.lcov
      # Codecovにアップロード
      - name: Codecov
        uses: codecov/codecov-action@v1.5.2
        with:
          file: ./coverage.lcov
          fail_ci_if_error: true

Codecovとの連携

Codecovに登録

公式ページからサインアップします。GitHubアカウントと連携させることができます。

プルリクにカバレッジを表示

公式Github Appsをインストールすると、プルリクのコメントでカバレッジを表示してくれます。

バッジを表示

Readme.mdにバッジを表示させることができます。
リポジトリ > Settings > Badgeからマークダウン用のコードをコピペすると、画像のようなバッジが表示されます。

以上の手順で、GitHub ActionsとCodecovを連携させ、Deno用コードのカバレッジを出すことができました！

感想

GitHub Actionsでリンター、フォーマッタ、型チェック、テスト、カバレッジをチェックするようにしました。
ところで、ここまでDeno以外の追加のツールを一切使っていないのにお気づきでしょうか。
Node.jsの場合は、ESLint、Prettier、tsc、Jestをインストールした上で、それぞれに対して設定ファイルを書く必要がありました。しかし、Denoの場合は組み込みのツールが利用できるため、追加のツールが一切必要ありません。とても便利ですね。

（ところで、コアチームはESLintとPrettierとJestとCloudflare WorkersとESDocとnpmを同時に保守管理しているようなもので、かなり忙しそうに見えますね…）