💬

ホスティング環境を用意せずに Storybook の VRT を自動テストする

2023/02/02に公開

Storybook

tech

前回: 基本的な storybook 環境の構築を進めました。

Storybook のテストを CI で稼働させる

storybook の自動テストを CI 環境内で実行する方法は storybook/test-runner の GitHub でも紹介されています。

事前に以下のライブラリのインストールが必要です。

$ npm i concurrently wait-on

以下のような形で scripts を追加します。 http-server でサーバを立て、wait-on でサーバの立ち上がりを待機して、準備が完了したら test-storybook を実行します。

{
  "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\""
}

github action の workflow は以下のような形になります。
timeout-minutes は適当な数値で調整しておきましょう。

name: Storybook Tests
on: push
jobs:
  test:
    timeout-minutes: 10
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14.x'
      - name: Install dependencies
        run: yarn
      - name: Run Storybook tests
        run: yarn test-storybook:ci

VRT を導入する

GitHub Action での VRT は以下のページに詳しくまとめられています。

必要なライブラリは、以下の2つです。

npm i storycap reg-cli

scripts は、4つ追加します。

{
  "snapshot": "storycap --serverCmd \"cd ./storybook-static && npx http-server storybook-static --port 6006\" http://localhost:6006",
  "snapshot:ci": "storycap --serverCmd \"cd ./storybook-static && npx http-server storybook-static --port 6006\" http://localhost:6006 -o __actual__",
  "vrt": "reg-cli __actual__ __screenshots__ __diff__ -R report.html",
}

snapshot: UI の画像をキャプチャするコマンド。標準の __snapshot__ フォルダに出力し、正となるイメージを格納する場所として利用する。
snapshot: UI の画像をキャプチャするコマンド。__actual__ に出力先を変更し、CI上で実際の状況を出力する場所として利用する。
vrt: 2つのフォルダの画像を差分比較して、__diff__ に出力する。

手元で一度 npm run snapshotを実行して、__snapshot__を生成してリポジトリに格納しておきましょう。
運用上、__actual__ __diff__ は gitignore に追加しておきます。

workflow のファイルは以下のような形になります。

name: Storybook Tests
on: push
jobs:
  build:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14.x'
      - name: Install dependencies
        run: npm ci
      - name: Build & Run Storybook tests
        run: npm run test-storybook:ci
      - name: Capture UI Images
        run: npm run snapshot:ci
      - name: Run VRT
        id: vrt
        run: npm run vrt
        continue-on-error: true
      - name: upload report
        uses: actions/upload-artifact@v2
        with:
          name: vrt-report
          path: |
            report.html
            __actual__
            __screenshots__
            __diff__
          retention-days: 5
      - if: ${{ steps.vrt.outcome != 'success' }}
        run: exit 1

storybook のテストが通ったら、画像をキャプチャします。
Run VRT で画像の比較をします。
- ここでエラーが出ても結果のアップロードが必要なため、continue-on-error: true をセットします。
upload report でレポートを artifact にアップロードします。

今回のサンプルリポジトリはこちらに

ホスティング環境を用意せずに Storybook の VRT を自動テストする

Storybook のテストを CI で稼働させる

VRT を導入する

参考

Discussion