🍣

GitHub Actions と Husky で Vitest を動かす

2024/03/23に公開

GitHub Actions

開発環境

Github Actions や Husky(lint-staged)、 Vitest の説明

Github Actions や Husky(lint-stage)、 Vitest の使い方や0からの構築に関しては下記記事で説明をしているのでよければ参考に。

導入

Husky(lint-staged) に Vitest 用のコードを追加する
vitest 用の workflow を作成する

Husky(lint-staged) に Vitest 用のコードを追加する

Husky(lint-staged) は構築済みの前提で進める。
package.json に記載されている lint-staged のスクリプトに下記を追加する。

"lint-staged": {
  ・・・
  "*.test.{ts?(x)}": [
    "vitest run --coverage"
  ]
},

vitest 用の workflow を作成する

プロジェクトに.github/workflows/test.ymlを作成し、下記コードを貼り付ける。

# アクション名
name: Test codes
# タイミングを指定
on:
  pull_request:
    types: [opened, reopened, synchronize]
jobs:
  Test:
    name: Run test codes
    if: |
      github.event.pull_request.draft == false
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Install packages
        run: npm ci

      - name: Show coverage
        run: npm run test:coverage

何をしているのかざっと説明。
name: Test codes
PRを作成した際に表示される名前。

pull_request: types: [opened, reopened, synchronize]
github actions が発火するタイミング。

if: github.event.pull_request.draft == false
PR が Open の時のみ発火する。

runs-on: ubuntu-latest
github actions の実行環境。

uses: actions/checkout@v4
ワークフローを実行するパスを指定する。

run: npm ci
run: npm run test:coverage
package.json で設定したテストを実行する。

実際に動かしてみる

任意のテストを書き、push して PR を作成する。作成した PR のページ下部へスクロールし、Test codes / Run test codes (pull_request)に✅がついていれば成功！
実際にどのようにコードが動いているのかが気になる方は、Test codes / Run test codes (pull_request)の右側にあるDetailsをクリックしたら、下記添付がそうのような画面が表示されるので、それぞれのトグルメニューを開いてみて。

以上！