'스토리북'이란?

React, Vue, Svelte등 대부분의 현대 프론트엔드 프레임워크는 컴포넌트 기반 프레임워크다. 이 컴포넌트들이 복잡해지면서 각 컴포넌트들이 다양한 상황에서 스타일이 올바르게 변경되는지 확인하는게 중요해졌는데, 스토리북은 바로 이 필요성을 충족시켜주는 개발 도구다.

지금까지 배운 단위, 통합 테스트는 앱의 비즈니스 로직을 검증하는 테스트였다. 그래서 렌더링 결과까지는 검증할 수 없었던 것을 알 수 있었다. 스토리북을 사용하면 컴포넌트의 UI 렌더링 상태와 변경사항을 비즈니스 로직 및 컨텍스트의 간섭 없이 원하는대로 확인하며 개발을 진행할 수 있다.

뿐만 아니라 다음과 같은 것들도 확인할 수 있다 :

• 디바이스 너비에 따른 반응형 레이아웃
• 다국어 변경에 따른 레이아웃

TDD 적합도?

다만 스토리북은 각 테스트 케이스에 대한 정의가 어렵고 테스트 실패, 테스트 성공, 리팩토링이라는 사이클을 거치는 TDD에는 적합하지 않다.

하지만 이와 별개로 컴포넌트 개발의 효율성과 정확성을 높여주는 거의 필수적인 도구다.

시각적 회귀 테스트

시각적 테스트는 실제로 렌더링된 UI의 변경사항을 비교하여 검증하는 테스트다. 여기에 '회귀'라는 개념이 추가되면서 UI 변경사항이 발생했을 때 기존과 다른 점이 있는지 확인하고 결함을 수정하는 과정을 반복한다.

기준이 되는 UI가 있고, 여기에 변경이 감지된다면 이 변경이 개발자가 의도한 변경인지 아닌지 판단하는 과정이 있다.

• 개발자가 의도한 변경이라면 이 변경에 대한 결과과 회귀 테스트에 새로운 기준이 되도록 업데이트가 된다.
• 의도하지 않은 결과라면 의도하지 않은 변경점을 찾아 수정해야만 한다. (과정을 보면 스냅샷 테스트의 과정과 유사하다.)