chromatic에 git action 설정

push 후 chromatic에 자동 배포되도록 설정해보자!

 

 

작업 흐름은 commit을 push한다던가 풀 리퀘스트를 만드는 것 같은 이벤트에 의해 트리거된다.

• 상호작용 테스트와 접근성 검사를 Jest로 수행합니다.
• 시각적 요소 그리고 구성 테스트를 크로마틱(Chromatic)으로 수행합니다.
• 사용자 흐름(user flow) 테스트를 사이프레스(Cypress)로 수행합니다.

 

1. chromatic.yml 파일 생성

https://www.chromatic.com/docs/github-actions/

Introduction • Chromatic docs

on push 할 경우 jobs의 workflow가 발생한다.

1.1. 파일 생성

.github/workflows/chromatic.yml

$ mkdir .github
$ cd .github

$ mkdir workflows
$ cd workflows

$ vi chromatic.yml

 

1.2. chromatic.yml 파일 내용

# .github/workflows/chromatic.yml

# 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:
      - uses: actions/checkout@v1
      - name: Install dependencies
        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
        run: yarn
        # 👇 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 }}

 

 

2. Github Secret 세팅

2.1. Chromatic 프로젝트 생성

 

2.2. Chromatic 관리 페이지에서 토큰 확인

chromatic -> Manage -> Configure -> Setup Chromatic with this project token

 

2.3. Github Secrets에 토큰 설정

git repository -> Settings -> Secrets and vaiables -> Actions

git repository -> Settings -> Secrets and vaiables -> Actions -> New repository secret

 

3. 푸시 및 확인하기

소스를 수정하고 commit & push를 하게되면 chromatic까지 배포는 되는것을 확인 할 수 있다.

 

4. 의존성 캐시하기

공식문서에는 ui-tests.yml 파일 만들고 설정하면 이점이 있다고 하는데 현재로써 중요한건 아님으로 패스하고, 나중에 필요하면 사용해보고 내용을 추가해야 하겠다. 

https://storybook.js.org/tutorials/ui-testing-handbook/react/ko/automate/

Storybook Tutorials