[Storybook] Storybook visual test with Chromatic

September 12, 2020

하라는 컴포넌트화는 안하고 테스팅만 찾아보는 당신은 대체…

Storybook Tutorial에서 제시하는 테스트는 크게 세가지가 있다.

Visual tests : 직접 보고 의도대로 모양이 나왔는지 체크하는 방법
Snapshot tests : Storybook이 렌더된 markup의 snapshot을 찍어서 비교한다.
Unit tests : Jest를 사용해 같은 인풋에 대해 같은 아웃풋이 나오는지 체크한다.

하지만 앞서 언급했던 방법들은 UI bug를 감지하기 힘들다. UI bug는 경우에 따라 굉장히 미미한 차이일 수도 있기 때문에, Visual tests는 너무 수동이고, Snapshot tests는 UI에 적용했을 때 너무 많은 false positive(실제론 false인데 positive라고 나오는)를 발생시키며, pixel-level unit tests는 의미가 없다. 그래서 Storybook은 visual regression tests를 제안한다.

Visual regression testing for Storybook

Visual regression tests는 렌더링된 모양의 차이를 잡아내도록 디자인되었다. 모든 스토리의 스크린샷을 찍어서, 커밋별 변화점을 잡아낸다. 많은 visual regression testing 도구가 있지만, Storybook에선 클라우드에서 테스트를 할 수 있는 Chromatic을 제안한다!

Setup visual regression testing

Bring git up to date

먼저 storybook project의 git 저장소가 있어야 합니다! 기존에 만들었으면 상관없겠죠?

Get Chromatic

chromatic을 설치해줍니다.

yarn add -D chromatic

chromatic에서 git으로 로그인을 하고, repository를 추가합니다.

Chromatic

그러면 project-token을 받을 수 있고, 해당 명령어를 실행해 deploy합니다.

npx chromatic --project-token=<project-token>

package.json에 build-storybook이 없다고 한다면?

"scripts": {
	"build-storybook": "build-storybook"
},

그러고 나서 chromatic에 들어가면 정상적으로 배포된 것을 볼 수 있습니다.

진짜 chromatic의 기능은 여기부터 시작입니다. 아무 변화나 주고 다시 배포를 해봅시다. 저는 버튼의 background-color를 파랑에서 빨강으로 바꿔봤습니다. 그럼 다음처럼 변경점이 감지되었음을 보여줍니다. Review changes 버튼을 클릭해서 들어가봅시다.