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

# はじめに

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

前回の続きです。

前回の記事

https://qiita.com/keitaMax/items/5698eb72106c1fd1397b


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

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

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

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

https://qiita.com/Teach/items/d2c4d7bec98228df1807

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

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

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

```yaml:hello.yml
name: CI

on: 
  push:
    branches:
      - main

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/6d41e5a8-970c-7e6b-566d-ea6f3fe614fd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/3d3ca693-e743-1d70-52a2-174fed1f62a0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/7822c25c-8e67-cd37-509f-4a742fdebacb.png)

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

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

https://tech.actindi.net/2019/10/11/090521

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

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

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


```yaml: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してプルリクを作成します。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/cdeadc70-5422-8813-e910-bb5e0c0f0c20.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/abc765e6-5d42-04c5-95a3-5a39dfb620fc.png)

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

前回作成した`views/CountView/index.tsx`をESLintに引っかかるように以下のようにしてみます。
```tsx: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上で動き、以下のようにエラーになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/820378c4-b87e-03a3-2953-5b4ae3263f87.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/7758eaeb-b976-e531-29d0-298c4e3aaf6a.png)

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


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

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

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

# 参考文献

https://qiita.com/Teach/items/d2c4d7bec98228df1807

# 次の記事