【Chromatic】squash and merge でmainにマージするフローの場合のビルド

Chromaticは特に指定がない限り同じブランチかそのブランチのコミット履歴に属する以前のビルドとの差分をチェックする

そしてその差分が承認されるとそれがベースラインのスナップショットとなり次回の変更との差分に使用される

Chromaticのブランチングとベースラインの考え方については以下

www.chromatic.com

ただ、そのベースラインをmainブランチと一致させておけばよいのだが、自分のプロジェクトではsquash and mergeをしているため、ChromaticでマージしたときのmainブランチとGithubでマージした時のmainブランチとでは履歴が異なってしまっている

これにより、次に差分を確認する時ベースラインが比較元のコミット履歴にないため毎回新規の差分になってしまう

公式ドキュメントでもこのsquash and mergeやrebaseで履歴が消えてしまう問題について言及しているがよくわからなかったので

https://www.chromatic.com/docs/branching-and-baselines#how-baselines-are-calculated

こちらの記事を参考にした

dev.to

この記事によると、プルリクをつくるときにChromaticビルドするだけでなく、Github上でmainブランチにsquash and mergeがされた後に、もう一度Chromaticビルドをするのがよいらしい

このときのビルドはレビュー済みなので--auto-accept-changesで自動でChromaticで承認されるようにするのが肝

Github Actionsのジョブ設定は以下

name: Publish Storybook

on:
    push:
        branches:
            - main

jobs:
    storybook:
        name: Storybook

        runs-on: ubuntu-latest

        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  fetch-depth: 0

            - uses: ./.github/actions/load-node-modules

            - name: Create snapshots
              run: yarn chromatic --only-changed --auto-accept-changes
              env:
                  CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                  CHROMATIC_SHA: ${{ github.event.after }}
                  CHROMATIC_BRANCH: main

これで、squash and mergeでマージするようなフローでもChromaticの差分が正常にでるようになった