Zenn
🎃

ChromaticのTurboSnapとは何なのか

2022/05/07に公開
Storybook
Chromatic
tech

Chromaticではその契約プランや請求金額が snapshot の実行回数によって変わり、snapshot の実行回数はその対象の Story とビルド回数、ブラウザ、viewport の掛け合わせとなる（オープンソースプランは例外）。
そのため snapshot の実行回数をなるべく抑止することで金銭的コストを抑えられる可能性がありそうだけど、snapshot の実行回数を抑止する手段としてTurboSnapという機能が存在する。

ここでは TurboSnap が具体的にどのような機能なのかをChromatic 公式ドキュメントを読み、実際に Github Actions で有効化してみて、確認してみる。

TurboSnap とは

https://www.chromatic.com/docs/turbosnap

TurboSnap とは、変更対象のコンポーネントを特定してそのコンポーネントに関連する Story のみビルドおよび snapshot の対象とする Chromatic の機能で、上述の通り snapshot の実行回数抑止やそれに伴うビルド速度改善が見込めるもの。

前提条件

TurboSnap を利用するには、前提として以下を満たしておく必要がある。

  • Chromatic v5.8 以上
  • Storybook v6.2 以上
  • Webpack（Vite の方のサポートは実験的で vite-plugin-turbosnap を利用する必要がありそう）
  • .storybook/main.jsで対象の story が正しく指定されている
  • squash や rebase での merge ではない
  • pull_requestではなくpushをトリガーにして実行している（Github Actions の場合）

squash や rebase しないことや Github Actions でpushをトリガーにすることは、Chromatic のBaselineを保つことに関連したものだと思われるので、TurboSnap の有効無効に関わらず Chromatic を利用する上では従っておいた方が良さそうな項目に見える。

有効にするには

--only-changedを CLI のオプションとして渡すか、（Github Actions の場合）onlyChangedオプションを指定することで有効になる。

どのようにして機能しているか

内部的には以下の流れで処理されている。Vite の場合はvite-plugin-turbosnap が変更対象の story ファイルの検出部分を担っているように見える。

  1. 比較対象のビルドの commit との差分について確認する
  2. Webpack の dependency graph を用いて、差分を元に変更対象の story のファイルを探す
  3. 対象の Story ファイルの story のみを snapshot 実行する

TurboSnap が有効でも全ての Story が snapshot の対象になるケース

偽陽性回避のため、特定の状況においては全ての Story が snapshot 対象となる。その状況とは以下の状況。

  • package.json, package-lock.json（もしくはyarn.lock）でのパッケージバージョンの変更
  • Storybook の設定の変更
  • .storybook/preview.jsで import されているファイルに対する変更
  • --externalsオプションで指定されているファイルに対する変更
  • 同一ビルドの再実行
  • インフラの更新
  • 新しいブラウザでの UI テスト

なお、追加で設定が必要なケース（--storybook-build-dirオプションを指定している場合や Storybook でstaticDirsオプションを指定している場合などがそれに該当する）もあるようだけど、ここでは詳細に確認しない。

Github Actions で確認する

TurboSnap が意図通りに動いているかどうかを確認するには CLI の出力を確認する。
以下のように Chromatic の Github Actions でonlyChangedオプションを指定して挙動を確認してみる。

# Workflow name
name: 'Chromatic'

# Event for the workflow
on: push

# List of jobs
jobs:
  chromatic-deployment:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0 # 👈 Required to retrieve git history
      - name: Install dependencies
        run: npm ci
        # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          autoAcceptChanges: 'main'
          onlyChanged: true

この状態で一部の Story のみに影響がある（その Story で利用しているコンポーネントに閉じた CSS の修正等）を加えた commit を push して Github Actions で Chromatic の出力を確認する。そうすると以下のように TurboSnap が有効になっていて、影響がある Story に限定して snapshot が実行されていることを確認できる。

Starting partial build
    → Snapshots will be limited to 1 story files affected by recent changes
✔ TurboSnap enabled
Capturing 2 snapshots and skipping 6 snapshots.

まとめ

TurboSnap は設定が複雑化することによるデバッグ容易性が低下する懸念などから、Chromatic をある程度使い慣れた状態になってから利用することが推奨されているので、その点を考慮しつつコストを抑える上での手段としては有力な選択肢として認識しておくと良さそう。

⚠️ When using TurboSnap, your builds may complete in less time using fewer snapshots. However, we don’t recommend using TurboSnap immediately when starting out with Chromatic since the configuration is more complicated and can lead to difficult to debug scenarios or UI changes being missed. Instead, become familiar with Chromatic’s out of the box behavior and once your project has been running smoothly for some time consider trying out TurboSnap.
https://www.chromatic.com/docs/turbosnap

GitHubで編集を提案

Discussion