[javascript] Storybook에서의 테스트와 문서 작성
Storybook은 컴포넌트 기반 개발을 위한 도구로, 테스트와 문서 작성에 매우 유용합니다. 이 글에서는 Storybook에서 테스트와 문서 작성을 어떻게 할 수 있는지 살펴보겠습니다.
테스트
Storybook은 컴포넌트를 독립적으로 테스트할 수 있는 환경을 제공합니다. 여러 가지 상황에서 컴포넌트의 동작을 확인하고 문제를 파악할 수 있습니다. Storybook에서 테스트를 작성하기 위해서는 다음과 같은 단계를 따를 수 있습니다:
- Storybook 설정 파일에 테스트를 위한 라이브러리를 추가합니다. 대표적으로 Jest, Enzyme 등이 있습니다.
// .storybook/main.js
module.exports = {
//...
addons: [
//...
'@storybook/addon-jest'
],
//...
};
- 컴포넌트와 관련된 테스트 파일을 생성합니다. 이 파일에서 컴포넌트의 동작을 확인하는 테스트를 작성합니다.
// src/components/Button/Button.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('renders button with correct text', () => {
render(<Button>Click Me</Button>);
const buttonElement = screen.getByRole('button', { name: /click me/i });
expect(buttonElement).toBeInTheDocument();
});
- Storybook에서 테스트 스토리를 작성합니다. 이를 통해 Storybook에서 해당 컴포넌트를 렌더링하고 테스트할 수 있습니다.
// src/components/Button/Button.stories.js
import React from 'react';
import Button from './Button';
export default {
title: 'Components/Button',
component: Button,
decorators: [() => <div style={{ margin: '2em' }} />],
};
export const Default = () => <Button>Click Me</Button>;
- Storybook 실행 후
Tests탭에서 테스트 결과를 확인할 수 있습니다.
문서 작성
Storybook은 컴포넌트 기반 문서 작성을 위한 용도로도 활용될 수 있습니다. 컴포넌트의 사용 방법, 속성, 예제 등을 문서화하여 개발자들에게 도움을 줄 수 있습니다. Storybook에서 문서를 작성하기 위해서는 다음과 같은 단계를 따를 수 있습니다:
- Storybook에서 문서를 작성하기 위해
docs애드온을 설치합니다.
npm install --dev @storybook/addon-docs
- 컴포넌트와 관련된 문서를 작성하는 스토리 파일에
docs애드온을 적용합니다.
// src/components/Button/Button.stories.js
import React from 'react';
import Button from './Button';
export default {
title: 'Components/Button',
component: Button,
decorators: [() => <div style={{ margin: '2em' }} />],
parameters: {
docs: {
description: {
component: 'A simple button component.',
},
},
},
};
export const Default = () => <Button>Click Me</Button>;
- Storybook 실행 후
Docs탭에서 컴포넌트에 대한 문서를 확인할 수 있습니다.
마무리
Storybook을 사용하면 컴포넌트의 테스트와 문서 작성을 효과적으로 관리할 수 있습니다. 테스트를 통해 컴포넌트의 동작을 검증하고, 문서를 통해 컴포넌트의 사용 방법을 안내할 수 있습니다. Storybook은 개발자들에게 유용한 도구로써 계속해서 발전하고 있으니, 앞으로도 업데이트에 주의해보세요.