29장. 테스트와 시각 회귀

CSS unit test만으로 pixels를 보장하기 어렵다. component state별 Story, viewport matrix, screenshot diff, accessibility scan, keyboard E2E를 조합한다. animation, font, timezone, random data를 고정해 flaky diff를 줄인다.

0 pixel diff만 품질은 아니다. 의도한 변화는 승인하되 reviewer가 변경 이유와 영향 viewport를 본다. Chrome snapshot만 통과한 뒤 Safari에서 깨지는 위험을 줄이려 핵심 경로는 실제 engine별로 캡처한다.

이 책의 npm run capture는 로컬 Chrome에서 동일 StudioBoard 화면을 생성한다. 본문 이미지와 독자 실습 화면이 같은 코드에서 나온다.