Storybook은 자바스크립트 컴포넌트 라이브러리를 개발하고 테스트하는데 유용한 툴입니다. 이 글에서는 Storybook과 자바스크립트 컴포넌트 라이브러리를 함께 사용하여 어떻게 테스트를 진행할 수 있는지 알아보겠습니다.

1. Storybook 설치 및 설정하기

먼저, Storybook을 설치하고 설정해야합니다. Storybook은 Node 패키지로 제공되며, 다음 명령을 사용하여 설치할 수 있습니다:

npm install @storybook/react --save-dev

설치가 완료되면, 프로젝트 디렉토리에 .storybook이라는 이름의 디렉토리를 생성하고, 그 안에 main.js 파일을 생성합니다. 이 파일은 Storybook의 설정 파일로 사용됩니다. 다음은 기본 설정 내용입니다:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
  ],
};

위에서 stories 속성은 Storybook이 stories 파일을 찾을 경로를 설정하는 부분입니다. 이 경로를 자신의 프로젝트 경로에 맞게 수정해주세요.

2. Story 파일 작성하기

Story 파일은 자바스크립트 컴포넌트의 여러 상태나 프로퍼티에 대한 스토리를 작성하는 파일입니다. Storybook은 이 파일을 감지하고 Storybook UI에 스토리를 표시해줍니다. Story 파일의 확장자는 .stories.js로 설정하는 것이 관례입니다.

다음은 간단한 예시입니다:

// Button.stories.js
import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Default = () => (
  <Button onClick={action('button-click')}>
    Click me
  </Button>
);

export const Disabled = () => (
  <Button disabled onClick={action('button-click')}>
    Click me
  </Button>
);

위 예시에서는 Button 컴포넌트에 대한 스토리를 작성하고 있습니다. title 속성은 스토리의 타이틀을, component 속성은 스토리에 사용될 컴포넌트를 설정합니다. 그리고 export 키워드를 사용하여 각각의 스토리를 내보내줍니다.

3. Storybook 실행하기

Story 파일 작성이 완료되면, Storybook을 실행할 수 있습니다. 다음 명령을 사용하여 Storybook을 실행할 수 있습니다:

npm run storybook

위 명령을 실행하면, 브라우저에서 Storybook UI가 열리고 작성한 스토리들을 확인할 수 있습니다.

4. Story 파일에서 컴포넌트 테스트하기

Story 파일은 스토리를 작성하는 것 외에도 컴포넌트를 직접 테스트하는 용도로 사용할 수 있습니다. Knobs 애드온을 사용하면 스토리 파일에서 컴포넌트의 프로퍼티를 변경해가며 테스트할 수 있습니다.

다음은 Knobs 애드온을 사용하는 예시입니다:

import React from 'react';
import { withKnobs, text } from '@storybook/addon-knobs';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
  decorators: [withKnobs],
};

export const WithText = () => (
  <Button>
    {text('Label', 'Click me')}
  </Button>
);

위 예시에서 withKnobs 데코레이터를 사용하여 Knobs 애드온을 적용한 것을 볼 수 있습니다. 그리고 text 함수를 사용하여 Label 프로퍼티를 변경해가며 테스트할 수 있습니다.

5. Storybook과 자바스크립트 컴포넌트 라이브러리의 테스트 방법

Storybook을 사용하여 자바스크립트 컴포넌트 라이브러리를 테스트하는 방법에 대해 알아보았습니다. Story 파일을 작성하여 컴포넌트의 상태나 프로퍼티에 대한 다양한 스토리를 구성하고, Knobs 애드온을 사용하여 컴포넌트를 테스트할 수 있습니다. 이를 통해 개발자는 컴포넌트의 테스트를 더욱 쉽고 유연하게 진행할 수 있습니다.

더 자세한 내용은 Storybook 공식 문서를 참고하시기 바랍니다.