Open8

chromaticでstorybookのビジュアルテスト

KTKT

storybookのセットアップ

npx create-react-app storybook-chromatic-sandbox

npx -p @storybook/cli sb init

参考
https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/

KTKT

chromatic の追加とdeploy

yarn add -D chromatic

chromaticにログイン & githubからプロジェクトを選択

project作成後tokenを取得することができる

yarn chromatic --project-token=<project-token>

デプロイ完了

KTKT

CIの設定
.github/workflows内にchromatic.ymlの作成

# .github/workflows/chromatic.yml
# name of our action
name: 'Chromatic Deployment'
# the event that will trigger the action
on: push

# what the action will do
jobs:
  test:
    # the operating system it will run on
    runs-on: ubuntu-latest
    # the list of steps that the action will go through
    steps:
      - uses: actions/checkout@v1
      - run: yarn
      - uses: chromaui/action@v1
        # options required to the GitHub chromatic action
        with:
          # our project token, to see how to obtain it
          # refer to https://www.learnstorybook.com/intro-to-storybook/react/en/deploy/
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
KTKT

該当のリポジトリのgithub sercretにCHROMATIC_TOKENを追加

KTKT

visual testのsampleとしてブランチを切って、コンポーネント内少し変更してpush

git checkout -b "check_visual_test"
git push origin check_visual_test
KTKT

PR作成
UI Testが入るようになった

chromaticで変更箇所を確認することができる

chromaticで全てapproveが入るとCIのcheckをpassすることができる