Storybook 스냅샷 테스트

이번 포스팅은 간단히 배포가 된 사이트에 대해 PR을 보낼 때, UI 변형이 일어난 경우 어떻게 되는지 확인해보는 방법을 간단히 확인해보려고 합니다.

 

1. GitHub에 Chromaitc 설치하기

이미 이전 포스팅에 Chromatic에 storybook 배포하는 단계에서 Chromatic에 GitHub 연동을 해줬다고 생각해서 그냥 Pull Request를 올렸는데 웬걸... UI 테스트가 하나도 진행되지 않았습니다.

그래서 크로마틱 웹 사이트를 다시 들어가봤더니 옆에 PRs 탭이 있었고, 여기 들어가보니 GitHub에 Chromatic을 설치하라는 버튼이 있었습니다.

Chromatic PRs 탭

 

2. 분기 브랜치에 대한 build

2. 분기 브랜치에 대한 build는 GitHub Actions를 통해 자동 배포하는 것이 좋을 것 같습니다!..

위에서 GitHub에 Chromatic을 설치해도 아무일도 일어나지 않는다...

그래서 다시 chromatic을 들어가보면 분기 브랜치에 대해서 chromatic build를 하라는 말이 나옵니다.

npx chromatic --token-id={토큰id}

관련 명령어를 복사하여 실행해보면

storybook build

엄청 오래 걸립니다....

스냅샷 테스트

분기된 브랜치에 대한 build가 마무리되면 스냅샷 테스트가 실행되게 됩니다.

UI 테스트에서 Details를 들어가보면 chromatic 웹 사이트에 들어가지게 되고 변경 사항이 일어난 구간은 Unreviewed 상태로 나타나게 됩니다.

Unrevied state

이 변경사항들을 검토하면서 의도된 변경사항이라면 Accept를 눌러주면 됩니다.

의도되지 않은 변경사항이라면 Deny를 해주면 됩니다.

InBoxScreen

여기서 Deny된 변경 사항이 있을 경우 PR의 UI Tests항목이 x가 되게 됩니다.

 

 

알게 된 점

1. 스냅샷 테스트를 하기 위해 필요한 storybook 관련 addon이 있습니다. 이전 포스팅을 읽어보지 않으셨다면 아래의 코드를 꼭 추가해줘야 스냅샷 테스트를 할 수 있습니다.

import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();

2. 스냅샷 테스트를 하기 위해서는 Chromatic에 배포를 해야합니다. 그러므로 UI 수정과 관련된 브랜치는 모두 Chromatic에 배포한 뒤 변경 사항에 대한 Review를 해줘야합니다.

3. Chromatic의 UI Review가 deny됐다고 해도 merge는 할 수 있습니다. (pending, deny상태일 때 merge를 막는 설정에 대해서는 아직 찾지 못했습니다...)

4. 저와 같은 경우 test 파일을 찾지 못해 스냅샷 테스트가 시작하지 않았습니다. jest config를 통해 테스트 파일을 명시해주는 것이 좋을 것 같습니다.