Chromatic은

Storybook의 문서 공개, UI 테스트, UI 검사 메커니즘을 제공하는 서비스

Chromatic 기능 소개

Storybook 문서 공개

구축된 Storybook은 Giit 제출 단위로 기록됩니다.
스토리북의 버전 관리가 가능하다는 얘기다.

UI 테스트(시각 테스트)

Chromatic은 모든 Story에 따라 캡처를 촬영하여 자동으로 이전 캡처와 차이가 있는지 확인합니다.
차이가 있다면 그것에 대해 검토해서 변경이 정확한지 확인할거야.

Chromatic 가져오기

주로 참고여기.의 자료(기본적으로 이렇다)로 총결산한 것이다

1. chromatic 프로젝트 합작

어쨌든 로그인.이용하고 싶은 아이템이 있는 계정으로 로그인해주세요.

항목을 선택하면 다음 화면이 표시됩니다.

아이템 토큰은 잠시 후 사용, 기억하세요

2. 프로젝트에chromatic 설치

다음 명령을 사용하여chromatic를 설치합니다.

npm install --save-dev chromatic

3. chromatic에 대한 디버깅 명령 실행

cheromatic 화면에 표시된 영패를 사용하여chromatic 명령을 실행합니다.
이 명령은storybook의 구축에서chromatic의 디버깅, UI 테스트에 이르기까지.

npx chromatic --project-token=xxxxxxxxx

중간에script를 추가할지 여부에 문제가 발생할 수 있습니다.
이것은 chromatic와 같은script입니다.json에서 생성됩니다.
특별한 필요성이 없다면 기호화폐는 신용정보이기 때문에 넣지 않는 것이 좋다.
chromatic의 프로젝트 페이지를 확인하면 구축 결과가 표시됩니다.(이하 첫 디버깅 후 표시됨)

명령 실패?

초기 설정에서 chromatic 명령은 UI 테스트를 자동으로 실행하고 차이가 있으면 오류를 반환합니다.(대개 CI용)
프로그램 자체가 성공했으니 cheromatic의 웹 화면을 열어 UI의 차이를 확인하세요.

4.CI 설정(GitLab)

다음은 "chromatic": "npx chromatic --project-token xxxxx"에 기술된 최소한의 작업이다.
하지만.gitlab-ci.yml 신용카드이기 때문에 환경 변수로 지정하는 것이 좋다.
.gitlab-ci.yml

chromatic_publish:
  image: node:14
  script:
    - npm install
    - npx chromatic --project-token=$CHROMATIC_TOKEN --exit-zero-on-changes

project-token는 "chromatic 명령이 실패했습니까?"구문을 사용합니다.
GitLab 이외의 CI에 대해서는 여기를 참조하십시오.
https://www.chromatic.com/docs/gitlab