VitestのcacheをCIで利用するメモ📝

以前書いたJestのCacheをCIで利用して高速化するのをVitestでも出来ないか調べたら出来そうだったのでやり方をメモ📝

madogiwa0124.hatenablog.com

ちなみにVitestでもdefaultでcacheが使われるようです。

cache Type: false | { dir? } Options to configure Vitest cache policy. At the moment Vitest stores cache for test results to run the longer and failed tests first. Configuring Vitest | Vitest

Vitestでcacheを保存するパスを指定する

CIでcacheしやすいようにcacheの配置先をcache.dirで明示的に指定します。

/// <reference types="vitest" />

import { defineConfig } from "vite";

export default defineConfig(({ command, mode }) => {
  return {
    test: {
      cache: {
        dir: "node_modules/.cache/vitest",
      },
    },
});

cache.dir Path to cache directory. https://vitest.dev/config/#cache-dir

CIでVitestのcacheを利用する

以下がVitestのcacheを利用するような設定を入れたGitHub Actionのサンプルです。

name: frontend ci

on: [push]

jobs:
  ci:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Tokyo
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: "16"
          cache: 'yarn'
      - name: install node deps
        run: yarn install --frozen-lockfile
      - name: cache vitest
        uses: actions/cache@v3
        with:
          path: node_modules/.cache/vitest
          key: vitest-v1-${{ github.ref_name }}-${{ github.sha }}
          restore-keys: |
            vitest-v1-
      - name: test js
        run: yarn test:coverage

簡単ですね！