【Nuxt3】ESLintで自動テストをGitHub上で行う

はじめに

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

今回はESLintを使用して自動テストをGitHubActionsを使用してPullRequestを出したときに、GitHub上で行えるようにしたいと思います。

前回の記事

ESLintをローカルでたたく

すでに以下コマンドをするとESLintが走るように前回作成しました。

npm run lint

package.jsonのscriptsは以下のように記載しています。

package.json

    "lint": "eslint --ext \".js,.vue,.ts,.cjs\" --ignore-path .gitignore . --fix",

これをGitHubActionsでGitにPullRequestを出したときに実行できるようにしたいと思います。

GitHubActionsを作成

ルートディレクトリに.github/workflowsフォルダを作成し、その下に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

GitHubActionsなどについては以下の記事でやっているので参考にしてください。

GitHubにPushしてPullRequestを出してみる

GitHubにPushしてプルリクを作成します。

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

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

失敗させてみる

次にしっかりと動いていることを確認するために、失敗させてみます。

index.vueに使用しないxxxという変数を用意してPushしてみようと思います。

index.vue

<script setup lang="ts">
  import { useCounter } from './hooks';

  const { counter, inc, dec } = useCounter();
  const xxx = '';
</script>

<template>
  <div class="bg-red-600">
    カウンター: {{ counter }}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>

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

これでGitHubActionsで正しく動いていることが確認できました。

おわりに

GitHubActionsを使用すると簡単に自動テストをすることができるので今後積極的に使用したいです。

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

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

参考