storycap + reg-suit による VRT 導入メモ

Next.js 環境の VRT をするために、storycap + reg-suit を導入したので、導入時に困ったりしたことをメモ。

CI 環境は GitHub Actions、保存先は S3。

storycap がタイムアウトする

最初 storybook dev で storybook を立ち上げて snapshot を取ってみたが、タイムアウトしてしまっていた。

$ npx storycap http://localhost:6006 --serverCmd 'storybook dev -p 6006'
info Wait for connecting storybook server http://localhost:6006.
error Timed out waiting for: http-get://localhost:6006

--serverTimeout オプションを伸ばしても無駄で、storybook dev -p 6006 & sleep 15' のよう sleep すると動くが、たまに動かなくてイマイチ安定しなかった。

storybook dev を諦めて、ビルドしたあとに http-server でホストするようにしたらうまくいった。

$ npx storybook build
$ npx storycap http://localhost:6006 --serverCmd 'npx http-server -p 6006 storybook-static'

前回の snapshot と比較できない

最初は reg-suit init に従って reg-keygen-git-hash-pluginで比較元、比較先の snapshot key を取得しようとしたが、Failed to detect the previous snapshot key と言われ、うまくいかなかった。

actions/checkout@v4 で fetch-depth: 0 にするとうまくいくが、checkout に時間がかかるようになってしまったので、reg-keygen-git-hash-plugin をやめてreg-simple-keygen-plugin で snapshot key を自前で設定するようにした。

日本語が文字化けする

日本語が豆腐(□) になってしまっていた。CI の中で fonts-ipafont を明示的に入れてあげて解決。

最終的に、actions の .yml ファイルと regconfig.json は以下のようになった。

# actions.yml
name: vrt-nextjs

on:
  push:
    branches:
      - main
  pull_request:
    paths:
      - '<file_path>'

jobs:
  vrt-nextjs:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - name: checkout
        uses: actions/checkout@v4

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@4
        with:
          aws-region: <region>
          role-to-assume: <role>
          role-session-name: <role_name>

      - name: Install Japanese Fonts
        run: |
          sudo apt-get install fonts-ipafont

      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: '.node-version'

      - name: npm ci
        run: npm ci

      - name: build storybook
        run: npx storybook build

      - name: capture snapshot
        run: npx storycap http://localhost:6006 --serverCmd 'npx http-server -p 6006 storybook-static' --serverTimeout 60000

      - name: exec reg-suit
        run: npx reg-suit run
        env:
          # on: push で動いた場合は比較したいわけじゃなくて比較対象のスクリーンショットを取りたいだけなので、ダミーのキーを指定しておく
          REG_EXPECTED_KEY: ${{ github.event.pull_request.base.sha || 'pseudo_expected_key' }}
          REG_ACTUAL_KEY: ${{ github.event.pull_request.head.sha || github.sha }}

# regconfig.json
{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "addIgnore": true,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-simple-keygen-plugin": {
      "expectedKey": "$REG_EXPECTED_KEY",
      "actualKey": "$REG_ACTUAL_KEY"
    },
    "reg-notify-github-plugin": {
      "prComment": true,
      "prCommentBehavior": "default",
      "clientId": "<client_id>"
    },
    "reg-publish-s3-plugin": {
      "bucketName": "<bucket_name>",
      "acl": "private"
    }
  }
}

次は setup-node キャッシュとか ubuntu-latest じゃなくて別な高速なランナーにするとかしたい。