Storybook을 이용한 컴포넌트 UI 테스트 및 문서화

이번 글은 진행하는 프로젝트에 Storybook을 이용해 컴포넌트의 UI를 테스트하며 개발을 진행하는 컴포넌트 주도 개발법 CDD를 적용하며 정리하기 위해 작성했다.

CDD는 컴포넌트를 모듈 단위로 나누어 개발하며 전체적인 UI 개발을 진행하는 개발 및 설계 방법론 이다.
컴포넌트 단위로 시작해 전체 UI를 구성하기 위해 점진적으로 개발해 나아가는 Bottom-UP 성향을 갖고있다.

Storybook을 이용한 CDD는 UI 디자인을 체계적으로 개발 디자이너와의 효율적인 협업을 UI 컴포넌트 익스플로어 툴을 이용해 진행할 수 있다. 문서화된 컴포넌트의 UI를 CSS, JS, 단위 테스트 등 UX에 영향을 줄 수 있는 요소들의 테스트도 가능하다.

 

기초 사용법

우선 Storybook의 기본적인 사용법에 대해 알아보자.

 

Storybook을 사용하기 위해서는 설치를 해줘야 한다. Storybook을 설치할 디렉터리로 이동한 뒤 Storybook을 설치하자.

cd 스토리북을 설치할 디렉터리
npx @storybook/cli sb init

 

이렇게 설치가 되었다면 해당 디렉터리에 .storybook이 생겼을 것이다. 내부에 main.ts 파일과 preview.ts 파일이 생성되었다.

 

main.js | ts 파일은 문서화되는 stories 파일의 위치, 사용하는 애드온, 기능 플래그 및 프로젝트 별 설정(절대 주소 참조 설정 등)을 포함해 Storybook 프로젝트의 동작을 정의하는 파일이다.

 

preview.js | ts 파일은 문서화된 stories 파일이 렌더링 되는 방식을 제어하고 글로벌 데코레이터와 매개변수를 추가하는 파일이다. preview 파일은 개별적으로 렌더링되는 Canvas UI에 로드되며 모든 스토리에 적용되는 글로벌 코드(CSS 또는 JS)를 사용할 수 있게 합니다.

 

이제 설치된 기본 파일들을 제외한 개발자가 만든 컴포넌트를 Storybook을 이용해 문서화를 해보도록 하자.

 

나는 두 가지 컴포넌트를 문서화 및 UI 테스트를 진행하려고 한다. 개발하려는 페이지들에 공통으로 들어가는 Header 컴포넌트에 들어가는 네비게이션 바(버튼) 컴포넌트와 Header 컴포넌트로 진행하습니다.

 

// NavBar.tsx
import React from 'react'
import styled from 'styled-components';

interface NavBarInterface {
  text: string
}

const NavBar = ({ text }: NavBarInterface) => {
  return (
    <NavBlock>
      {text}
    </NavBlock>
  )
};

const NavBlock = styled.div`
  width: 15rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
`

export default NavBar;

// Header.tsx
import React from 'react';
import IconBody from 'components/modules/IconBody';
import Crouch from 'assets/Images/Crouch.png';
import styled from 'styled-components';
import NavBar from './NavBar';

const Header = () => {

  return (
    <HeaderBody>
      <IconArea>
        <IconBody width={100} height={100} IconUrl={Crouch} />
      </IconArea>
      <NavArea>
        <NavBar text={"Play"} />
        <NavBar text={"Ranking"} />
        <NavBar text={"Developer"} />
      </NavArea>
      <LoginStateArea text='Login State'/>
    </HeaderBody>
  )
}

const HeaderBody = styled.div`
  width: 100%;
  height: 4vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 20px;
  background-color: aliceblue;
  margin-bottom: 2rem;
`

const IconArea = styled.div`
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
`

const NavArea = styled.div`
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: space-around;
`

const LoginStateArea = styled(NavBar)`
  width: calc(8rem - 20px);
  height: 100%;
  padding: 0 10px 0 5px;
`

export default Header;

 

사실 점진적으로 한 컴포넌트를 퍼블리싱 및 개발을 진행하며 진행했지만, 이 글에서는 Storybook에 대한 이해를 돕기 위해 이미 완성된 컴포넌트를 이용한다는 점을 양해 부탁드립니다. 😅😅

 

Storybook의 스토리 파일은 어찌보면 또다른 컴포넌트를 만드는 것처럼 느껴진다. 문서화할 컴포넌트를 불러오고, 그 컴포넌트에 들어가는 인수들을 지정해 주며 각 상황별 올바른 컴포넌트의 UI가 렌더링 되는지 테스트 하기 때문입니다.

 

최신 버전의 Storybook의 스토리 파일은 기본적으로 meta와 StoryObj 라는 CSF(Component Story Format) 방식의 문법이며 ES6 모듈 기반의 오픈 표준인 방식의 문법이다.

 

meta를 이용해 렌더링할 컴포넌트의 메타데이터( 컴포넌트 이름, 인수들의 타입, 매개변수 등 )를 정의한 객체를 만들어 주고 스토리 파일 내부의 모든 스토리에 전역으로 적용해줍니다.

 

StoryObj를 이용해 개별적으로 만들어줄 스토리를 정의해 주는 객체를 만들어줍니다. 컴포넌트의 인수를 전달하여 컴포넌트의 특정 상태나 변형을 나타내며 컴포넌트의 동작을 확인할 수 있습니다.

// NavBar.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import NavBar from 'components/modules/Header/NavBar';


const meta = {
  component: NavBar,
  args: {
    text: "test text"
  }
} satisfies Meta<typeof NavBar>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {}; // 이 부분에 인수로 데이터를 전달할 수 있습니다.

// Header.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import Header from 'components/modules/Header/Header';

const meta = {
  component: Header,
} satisfies Meta<typeof Header>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

 

이런 스토리 파일들을 만들었다면 터미널에 아래의 코드를 입력해 Storybook을 실행해보자!

npm run storybook

package.json에 실행 코드를 수정하게 된다면 터미널에서 작성해야하는 코드도 바꿔야한다.

 

Storybook이 실행되면 아래의 사진과 같이 만들어진 스토리 파일들이 디렉터리별로 구분되어 렌더링된다.

 

이제 각 스토리 파일이 렌더링된 모습을 확인하자.

 

위 사진은 필자가 컴포넌트가 렌더링된 사진이다.

현제 개발중인 프로젝트의 메인페이지이다.
너무 저퀄리티....😂

 

그렇다면 이제 위에서 작성한 스토리 파일이 렌더링된 모습을 확인해보자.

위 사진은 작성했던 NavBar.stories.tsx 파일의 모습이다.

 

위의 사진은 NavBar.tsx을 사용하는 Header.tsx을 적용한 Header.stories.tsx 파일의 모습이다.