스토리북 보일럿플레이트 - ChoDragon9/posts GitHub Wiki

목표

storybook 문서 기반으로 전반적인 기능 파악
mdx를 사용한 Docs 탭 구현 세팅
- https://storybook.js.org/addons/@storybook/addon-docs

에드온

특정 장치의 기능을 확장하기 위해 추가하는 보조 장치

파이어폭스에서 부가 기능 및 테마를 통틀어 에드온이라 한다.

플러그인과 동일함

플러그인

호스트 응용 프로그램과 서로 응답하는 컴퓨터 프로그램

목적

응용 프로그램 확장

뜻밖의 기능을 지원

응용 프로그램의 크기 줄이기

storybook

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/

시작하기

격리된 환경에 UI 컴포넌트 빌딩
이미지 스냅샷, 유닛 테스트 등 테스트
컴포넌트 문서 공유

설치하기

React App은 Create React App으로 설치할 수 있음.

Docs 탭에서 MDX 설정

MDX는 바로 사용 가능함
하지만, Docs 탭에서 MDX 파일 확장자를 사용하는 방법은 가이드안함
다음과 같이 사용하고, .storybook/main.js에서 mdx 확장자를 읽지 않도록 하면 동작함.
- ```
export default {
  parameters: {
    docs: {
     page: mdx.parameters.docs.page,
   }
  },
```

Visual testing

https://storybook.js.org/docs/react/workflows/snapshot-testing#configure-the-snapshots-directory

visual regression tests
layout, color, size, contrast를 비교

$ npm i -D @storybook/addon-storyshots-puppeteer puppeteer

// storybook.test.js

import path from 'path';

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

// The required import from the @storybook/addon-storyshots-puppeteer addon
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

initStoryshots({
  // your own configuration
  test: imageSnapshot(),
});

npm run storybook.test.js 실행 시, __image_snapshots__ 폴더에 이미지 스냅샷 생성됨