Open8
chromaticでstorybookのビジュアルテスト
sandbox
storybookのセットアップ
npx create-react-app storybook-chromatic-sandbox
npx -p @storybook/cli sb init
参考
chromatic の追加とdeploy
yarn add -D chromatic
chromaticにログイン & githubからプロジェクトを選択
project作成後tokenを取得することができる
yarn chromatic --project-token=<project-token>
デプロイ完了
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 }}
該当のリポジトリのgithub sercretにCHROMATIC_TOKENを追加
CI通る
visual testのsampleとしてブランチを切って、コンポーネント内少し変更してpush
git checkout -b "check_visual_test"
git push origin check_visual_test
PR作成
UI Testが入るようになった
chromaticで変更箇所を確認することができる
chromaticで全てapproveが入るとCIのcheckをpassすることができる