GitHub Actions と Husky で Vitest を動かす
開発環境
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をクリックしたら、下記添付がそうのような画面が表示されるので、それぞれのトグルメニューを開いてみて。
以上！
Discussion