【Next.js】ESLintをGitHub上で動かし、自動テストを作成する

はじめに

こんにちは、エンジニアのkeitaMaxです。

前回の続きです。

前回の記事

今回は、Next.jsで書いたソースを、ESLintをGitHub Actionsを使用してプルリクを出したときに自動でテストできるようにしたいと思います。

今回は以下を行っていきます。

1. GitHub Actionsでこんちにはを表示する。
2. ESLintをGitHubにPushしてプルリクをなげたときに実施する。

1. GitHub Actionsでこんちにはを表示する。

この記事を参考に、プルリクを出したときに'こんにちは'と表示しようと思います。

まず、.github/workflow/hello.ymlファイルを作成します。

中身は参考元の記事とほぼ同じにしています。

hello.yml

name: CI

on: 
  push:
    branches:
      - main

jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - run: echo "こんにちは"

この状態でコミット/Pushします。すると、GitHub上で以下のように表示されます。

これでGitHub上でこんにちはを表示することができました。

2. ESLintをGitHubにPushしてプルリクをなげたときに実施する

ここを参考に作成していきます。

新しくESLint用の.github/workflow/eslint.ymlファイルを作成します。

中身は以下のようにします。

eslint.yml

name: ESLint

on: [pull_request]

jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: npm install
        run: npm install
      - name: eslint review
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review
          eslint_flags: './**/*.{vue,ts,js}'
          fail_on_error: 'true'
      - name: eslint
        run: npm run lint

この状態でGitにPushしてプルリクを作成します。

すると、プルリクの画面が以下のようになります。

ESLintが走っていて、問題ないと以下のように緑のチェックが出ます。

今度はESLintに引っかかるようにしてみましょう。

前回作成したviews/CountView/index.tsxをESLintに引っかかるように以下のようにしてみます。

index.tsx

import React from "react";
import { useCountView } from "./hooks";

export const CountView = React.memo(() => {
  const { count, addCount } = useCountView();
  const { count, addCount } = useCountView(); //　ESLintに引っかかるように同じものを２つにしてみる。
  return (
    <div>
      <p data-testid="countText">{count}</p>
      <button data-testid="button" className="bg-red-500 px-2 py-4 hover:bg-red-200" onClick={addCount}>
        カウントアップ()
      </button>
    </div>
  );
});
CountView.displayName = "CountView";

これをPushすると、GitHub上で動き、以下のようにエラーになります。

この画面のDetailsを押すと以下のように詳細が見れます。

このようにして、GitHub Actionsを利用してプルリクをしたときにESLintを動かして自動でテストすることができました。

さいごに

初めてGitHub Actionsを使用しましたが、結構使いやすく、いろいろなことができそうだと感じました。

もっといいやり方があるよや、間違っているよというような指摘があればぜひ教えていただけると助かります。

最後までお読みいただきありがとうございました。

参考文献

次の記事