[javascript] Storybook과 자바스크립트 앱의 디자인 시스템의 UI 테스팅 방법

27 Nov 2023

javascript

UI 테스팅은 사용자 인터페이스의 동작과 외관을 검증하는 중요한 작업입니다. Storybook은 자바스크립트 앱의 디자인 시스템을 개발하고 테스트하는 데 도움이 되는 강력한 도구입니다. 이 글에서는 Storybook과 자바스크립트 앱의 디자인 시스템을 함께 사용하여 UI를 테스트하는 방법에 대해 알아보겠습니다.

Storybook이란?

Storybook은 개발자가 컴포넌트 기반의 디자인 시스템을 구축하고 문서화하는 데 도움을 주는 오픈 소스 도구입니다. Storybook을 사용하면 다른 환경에서 컴포넌트를 독립적으로 테스트하고 시각적으로 검증할 수 있습니다. 이를 통해 컴포넌트의 외관과 동작을 테스트하면서 개발자는 테스트 코드를 작성하는 번거로움을 줄일 수 있습니다.

디자인 시스템 구축하기

디자인 시스템을 구축하기 위해 먼저 Storybook을 설치해야 합니다. 다음 명령어를 사용하여 Storybook을 설치합니다:

npx -p @storybook/cli sb init

sb init 명령어를 실행하면 프로젝트 디렉토리 내에 .storybook 디렉토리와 storybook 스크립트가 생성됩니다. 이제 디자인 시스템을 구축할 준비가 완료되었습니다.

컴포넌트 스토리 작성하기

Storybook에서는 컴포넌트의 다양한 상태를 스토리라는 개념으로 정의합니다. 스토리는 컴포넌트의 외관과 동작을 설명하는 데 사용됩니다. 스토리를 작성하기 위해 .storybook 디렉토리 내에 main.js 파일을 생성합니다.

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

위의 코드는 스토리 파일이 src 디렉토리 내에 .stories.js 확장자를 가진 파일들로 작성된다는 것을 의미합니다.

이제 컴포넌트의 스토리를 작성합니다. 예를 들어 Button 컴포넌트에 대한 스토리를 작성하려면 src/components/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 Text = () => <Button onClick={action('clicked')}>Hello, Button</Button>;

export const Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

위의 코드에서는 Button 컴포넌트에 대한 스토리를 작성하고 두 가지 상태(Text와 Emoji)를 정의합니다. 각 상태에 대해 컴포넌트를 어떻게 렌더링하는지 확인하기 위해 적절한 콜백 함수를 작성합니다.

Storybook 실행하기

이제 스토리를 작성했으므로 Storybook을 실행하여 확인할 수 있습니다. 다음 명령어를 사용하여 Storybook을 실행합니다:

npm run storybook

명령어를 실행하면 브라우저에서 Storybook UI가 열리고 스토리를 확인할 수 있습니다.

UI 테스트 작성하기

Storybook을 사용하면 UI 테스트를 쉽게 작성할 수 있습니다. 테스트를 작성하기 위해 프레임워크 마다 다른 테스팅 라이브러리를 사용할 수 있습니다. 예를 들어 React를 사용하는 경우 react-testing-library를 사용할 수 있습니다. 이 라이브러리는 React 컴포넌트의 기능과 외관을 테스트하는 데 도움을 줍니다.

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

it('renders button correctly', () => {
  const { getByText } = render(<Button>Hello, Button</Button>);
  const buttonElement = getByText('Hello, Button');
  expect(buttonElement).toBeInTheDocument();
});

it('calls onClick callback when button is clicked', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button onClick={onClick}>Hello, Button</Button>);
  const buttonElement = getByText('Hello, Button');
  fireEvent.click(buttonElement);
  expect(onClick).toHaveBeenCalled();
});

위의 예제 코드에서는 render 함수를 사용하여 컴포넌트를 렌더링하고 getByText 함수를 사용하여 특정 텍스트를 포함한 엘리먼트를 찾습니다. 그런 다음 fireEvent를 사용하여 특정 이벤트를 발생시키고 이벤트에 대한 콜백 함수가 호출되었는지 확인합니다.

결론

Storybook과 자바스크립트 앱의 디자인 시스템을 함께 사용하면 UI 테스트를 쉽게 작성하고 관리할 수 있습니다. Storybook을 사용하여 컴포넌트의 다양한 상태를 스토리로 정의하고, 이를 바탕으로 UI 테스트를 작성할 수 있습니다. 이를 통해 개발자는 컴포넌트의 외관과 동작을 체계적으로 테스트하고 최종 사용자에게 품질 높은 앱을 제공할 수 있습니다.