Storybook: UI component explorer for frontend developers

• 체계적으로 컴포넌트 개발할 수 있도록 도와주는 도구
• Unit, Visual, Interaction, Snapshot 테스트 가능

Testing with Storybook

• Example

Storybook

• 재사용하기 이전에 테스팅 가능
• 아래와 같이, story를 만들고자 하는 컴포넌트와 동일한 파일명에 .stroies.jsx을 추가한 이름으로 파일 생성

import React from 'react';
import RoomBoardTemplate from './index';

export default {
    title: 'pages/rooms/board', // 왼쪽 사이드바에 나타낼 스토리 이름(경로는 '/'로 구분)
    component: RoomBoardTemplate // 타겟 컴포넌트
};

// 타겟 컴포넌트에 대한 예시 적용
export const standard = (args) => <RoomBoardTemplate {...args} />;

• 스토리 추가 또는 변경한 경우, yarn test -u 실행하여 storybook.test.js.snap 파일에 반영하고 github에 푸시