CSF (Component Story Format)

stories.js 혹은 stories.ts파일로 작성.

메타데이터와 각각의 시나리오를 보여주는 두 요소로 구성된다.

메타 데이터

• 정의, 제목, 필드 정보, 매개변수, 데코레이터 등에 대한 정보를 정의
• default export

스토리

• args 필드를 정의하여 컨트롤 스텝에서 동적으로 값을 변경해가며 UI의 변경사항을 확인할 수 있다.
• named export

스토리 작성 대상

UI만 렌더링 컴포넌트를 주로 대상으로 한다. 비즈니스 로직이 포함되어 있는 컴포넌트는 모킹과 같은 별도 준비 과정이 필요하다.

스토리 작성 대상과 통합 테스트 대상을 구분하는 고민이 비즈니스 로직과 UI를 분리하여 설계하는 습관을 낳는다.