Storybook은 개발자들이 사용자 인터페이스(UI) 컴포넌트를 개발, 테스트, 문서화하는 데 도움을 주는 도구입니다. 이를 통해 각 UI 컴포넌트를 독립적으로 테스트할 수 있고, UI 컴포넌트의 재사용성을 높일 수 있습니다. 이번 글에서는 Storybook을 사용하여 자바스크립트 앱의 테스트 자동화를 어떻게 수행할 수 있는지 알아보겠습니다.
Storybook 소개
Storybook은 UI 컴포넌트와 관련된 렌더링 결과를 스토리로 정의하여 개별 컴포넌트를 분리된 환경에서 테스트할 수 있게 해줍니다. 각 스토리는 특정 상태와 속성을 갖는 컴포넌트의 가상 인스턴스라고 생각할 수 있습니다. 이를 통해 개발자들은 UI 컴포넌트의 다양한 상황을 시뮬레이션하고, 이를 기반으로 개발 및 테스트를 진행할 수 있습니다.
자바스크립트 앱의 테스트 자동화를 위한 Storybook 설정
-
Storybook 설치하기
npm install @storybook/react --save-dev -
.storybook디렉토리 생성하기mkdir .storybook -
.storybook/main.js파일 생성하여 다음의 설정을 추가합니다.module.exports = { stories: ['../src/**/*.stories.js'], addons: [ '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', ], }; -
.storybook/preview.js파일 생성하여 다음의 설정을 추가합니다.import { addDecorator } from '@storybook/react'; import React from 'react'; // 전역에 적용될 데코레이터를 추가합니다. addDecorator((Story) => ( <div style={{ margin: '2em' }}> <Story /> </div> ));
컴포넌트 스토리 작성하기
.storybook 디렉토리에 컴포넌트 스토리를 작성합니다. 이 곳에서 각 컴포넌트의 다양한 상황을 시뮬레이션하고 테스트할 수 있습니다.
// Button.js
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
component: Button,
};
export const Default = () => <Button>Default Button</Button>;
export const Primary = () => <Button primary>Primary Button</Button>;
Storybook 실행하기
Storybook이 작성된 프로젝트 폴더에서 다음 명령어를 실행하여 Storybook을 실행합니다.
npm run storybook
Storybook 서버가 실행되면 브라우저에서 http://localhost:6006 로 접속하여 작성한 스토리를 확인할 수 있습니다.
테스트 자동화하기
Storybook을 사용하여 작성한 각 스토리는 실제 앱의 동작을 시뮬레이션하므로, 이를 기반으로 자동화된 테스트를 구축할 수 있습니다. 하나의 스토리는 특정 상황에 대한 컴포넌트의 렌더링 결과를 나타내므로, 예상되는 렌더링 결과와 실제 결과를 비교하여 테스트 결과를 판단할 수 있습니다.
예를 들어 Jest와 같은 테스트 프레임워크를 사용하여 Storybook 스토리에 대한 테스트를 작성할 수 있습니다. 스토리의 각 상황에 대해 예상되는 렌더링 결과를 작성하고, 스토리를 테스트하여 실제 렌더링 결과와 비교하는 방식으로 자동화된 테스트를 수행할 수 있습니다.
마무리
Storybook을 사용하여 자바스크립트 앱의 테스트 자동화를 수행하는 방법에 대해 알아보았습니다. Storybook은 UI 컴포넌트의 개발과 테스트를 더욱 효율적으로 진행할 수 있게 도와주는 강력한 도구입니다. 개발자들은 Storybook을 적극 활용하여 앱의 품질을 향상시키고, 버그를 미리 탐지하며 보다 견고한 앱을 개발할 수 있습니다.