Github ActionsでeslintとJestを実行するworkflow

やること

Github Actionsを使って、PRが作成されたタイミングでテストや構文解析を実行するというものです。

説明しないこと

• Github Actionsとは？
• それぞれの導入方法
• 細かい部分

Github Actionsを使用する時のポイント

Marketplaceを探すとかなり豊富に色々な開発者が開発をしたActionが利用出来るようになっているので、まずそちらを見てみるといいかもしれません。

Github Actionsの導入方法

Github Actionsを導入したいgithubで管理されているrepoに以下のようにworkflow定義用のmain.ymlを作成します。

上記でmain.ymlとしていますが、ここのファイル名は自由です。
かつ、複数のymlファイルを配置して、actionを分割することも可能です。

$ cd path/to/myrepo

$ mkdir -p .github/workflows

$ touch .github/workflows/main.yml

アクションを書く

今回実行したいこととして、以下のような流れを想定します。

1. Node.jsインストール
2. yarn install
3. reviewdogのインストール
4. eslintの実行
5. jestの実行
6. Artifactにカバレッジの保存
7. JestのカバレッジをPRコメントに挿入

# アクション名
name: CI

# タイミングを指定
on:
  pull_request:
    branches: [ master ]

jobs:
  build:
    name: build
    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: Run eslint
        run: yarn lint
      - name: Run Jest
        run: yarn jest
      - name: Upload test coverage artifact
        uses: actions/upload-artifact@v1
        with:
          name: coverage
          path: coverage
      - name: Show coverage in comments
        uses: ziishaned/jest-reporter-action@v0.0.1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          test-command: "yarn jest --coverage"

参考

アクトインディさんの記事をとても参考にさせていただきましたありがとうございます！！

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