Storybook

UI 컴포넌트 테스트 도구
UI 컴포넌트를 시각적으로 확인할 수 있음

설치

npx sb init

환경 설정

package.json

  "scripts": {
    ...
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },

실행

npm run storybook

디렉터리 구조

src/
  components/
    ProductBox/
      ProductBoxBase.tsx        // 실제 컴포넌트 파일
      ProductBoxBase.stories.tsx // Storybook 스토리 파일 (UI 컴포넌트 문서화용)
  tests/
    components/
      ProductBoxBase.test.tsx   // Jest를 통한 유닛 테스트