Github Actions で Nuxt.js のSPAにJestとESLintを実行してみた

毎月第3土曜日にお得クーポンを配布しているいこーよこどもBIRTHDAYはいこーよの中にありながら、このコーナーだけ独立したNuxt.jsのSPAとなっています。

https://birthday.iko-yo.net/birthday.iko-yo.net

次の記事で紹介したようにJestでテストしており、ESLintを使ってチェックもしています。

tech.actindi.net

これまでは実装していたのが主に私とデザイナーの二人だけだったのでCIを用意しておらず、ローカルでJestとESLintを実行してチェックしていました。

ちょうど Github Actions が使えるようになったので、これを使ってCIをやってみました。

Jest

まずはJestによるテストの実行。次のような内容のYAMLファイルを .github/workflows/jest.yml に置きます。この設定ファイルは .github/workflows/ にあればファイル名は何でも良いようです。

name: jest
on:
  pull_request:
    types: [opened, synchronize]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: Setup Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '11.12.x'
    - name: yarn install
      run: yarn install
    - name: Run jest test
      run: yarn test
    - name: Upload test coverage artifact
      uses: actions/upload-artifact@v1
      with:
        name: coverage
        path: coverage

上記YAMLは次の処理を定義しています。

プルリクエストを作成する、あるいはプルリクエストにプッシュすると次の処理を実行する
- Ubuntu ベースの環境にソースコードをチェックアウトする
- 指定したバージョンのNode.jsをインストールする
- yarn install でモジュールをインストールする
- yarn test でJestを実行する
- カバレッジの結果ファイルをアーティファクトとして保存する

実行結果はマージボタンのところに次の様に表示されます。キャプチャはJestでエラーのある場合のものです。

f:id:HeRo:20191011085735p:plain — Jestの実行結果

Details というリンクをクリックすると次の様にエラーの詳細を確認できます。

f:id:HeRo:20191011085802p:plain — Failしたテストの詳細

テストがすべて通れば、この画面からアーティファクトもダウンロードできます。

ESLint

ESLint はどこでどんなエラーがあるのかプルリクエストにコメントとして指摘してほしいと考えました¹。この手のツールとして当社のRailsプロダクトではRuby製の Prontoを利用しているのですが、Nuxt.jsのこのプロダクトではreviewdogを採用しました。理由は次の2つです。

Rubyを一切使ってないのでこのためだけにRubyを使うのはどうも…
公式にESLintのGithub Action Run ESLint with reviewdog が公開されている²

で、次のようなYAMLを .github/workflows/reviewdog.yml としてソースに追加します。

name: reviewdog
on:
  pull_request:
    types: [opened, synchronize]
jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: yarn install
        run: yarn install
      - name: eslint review
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review
          eslint_flags: './**/*.{vue,ts,js}'
      - name: eslint
        run: yarn lint

上記の設定ファイルは次の処理を定義しています。

プルリクエストを作成する、あるいはプルリクエストにプッシュすると次の処理を実行する
- Ubuntu ベースの環境にソースコードをチェックアウトする
- yarn install でモジュールをインストールする
- reviewdog/action-eslint@v1 を使ってESLintを実行する
- yarn lint で ESLintを実行する

見ての通り、上記の設定は処理として冗長です。 ESLint を reviewdog 経由で1回、直接実行で1回の計2回実行しています。なぜかというと reviewdog はエラーを発見してコメントしてくれるのですが、lint エラーがあってもexit 0 で終了するようなのです。それでチェックでエラーがあっても、reviewdog の実行自体にエラーがなければチェック成功として表示されてしまいます。 lintエラーがあれば、マージボタン上のチェック結果の表示でもエラーと表示してほしいので、lint エラーがexit 0で終了しない ESLint を直接実行することにしました³。

さて、これを実行してみます。 ESLintのエラーが見つかると、次のような結果が表示されます。

f:id:HeRo:20191011090215p:plain — reviewdogの実行結果（エラーあり）

そしてエラーの箇所には次のようなコメントが登録されます。

f:id:HeRo:20191011090240p:plain — reviewdogによるlintエラーのコメント

どのルールに違反しているのか指摘してくれています。どう修正すべきかわかりやすいですね。

まとめ

Jest、ESLint 両方のチェックにパスすると次の様に表示されます。

f:id:HeRo:20191011090318p:plain — 成功時の結果

とてもわかりやすいですね。

これでコードフォーマットの崩れなど些末な部分は修正済み、かつアーティファクトのカバレッジでテストが必要十分かもレビュアが確認しやすい状態でコードレビューを依頼できます⁴。

かんたんなシンタックスのYAMLの設定ファイルをリポジトリに追加するだけで、CIを追加できました。

プルリクエスト上の操作はほぼ変わりません。サードパーティのCIサービスを使うときのようにアカウントを作ったり、あっちこっちクレデンシャルなどの設定を合わせる煩わしさもありません。

Github Actions は何もテストだけに使えるわけではなく、Dockerイメージのビルドやデプロイパイプラインをトリガーしたりできます。いろんなエンジニアが作ったアクションが多数公開されておりそれらを利用できますし、自分でカスタムアクションを作ることもできます。

GitOpsの強力なツールとなるでしょう。

最後に

アクトインディではエンジニアを募集しています。 actindi.net

Jestもfailしたテストのコードにコメントで結果を入れてくれる方が便利かと思ったのですが、PRでの変更が、PRでは変更していない箇所のテストに影響したりするので難しそうですね。↩
実はProntoのアクションPronto Ruby もあるにはあります。↩
exit 0で終了するのはなにか設定が間違っているのかと調べたのですが、わかりませんでした。他の方のブログ記事でもそのような画面キャプチャを載せていたので現状、それが仕様なのかなと。↩
アクトインディではリリース前に相互レビューをしています。↩

アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

Github Actions で Nuxt.js のSPAにJestとESLintを実行してみた

Jest

ESLint

まとめ

最後に