Next.js 環境の VRT をするために、storycap + reg-suit を導入したので、導入時に困ったりしたことをメモ。
CI 環境は GitHub Actions、保存先は S3。
最初 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 じゃなくて別な高速なランナーにするとかしたい。
