[React] 테스트 도구인 스토리북(storybook)을 사용해보자

2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등)

2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트

---

 이때까지의 포스팅은 스타일이 적용되지 않은 기본적인 컴포넌트 형태였습니다. 그래서 바로 지난 포스팅인 Input 컴포넌트를 기반으로 스타일을 적용해볼 예정입니다. 하지만 그전에 컴포넌트의 디자인과 기능 등을 시각적으로 편리하게 확인할 수 있는 스토리북을 설치하고 사용해 보겠습니다.

 

 먼저 명령 프롬프트에서 아래와 같이 입력합니다. 마지막은 버전인데 미지정시 최신 버전입니다.

> yarn add --dev @storybook/react@5.3.0

그럼 자동으로 인스톨이 됩니다. 혹여 에러가 나시는 분들은 스토리북 공식 사이트를 확인 바랍니다.

 

 다음으로 프로젝트 루트 폴더에 있는 package.json를 열어 devDependencies에 스토리북이 있는지 확인하시고, "scripts": {} 부분에 아래와 같이 스토리북 실행 명령어를 추가합니다. 4000번은 포트번호 .storybook은 구성 폴더명입니다.

 

  ...
  "scripts": {
    "storybook": "start-storybook -p 4000 -c .storybook",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...

 

 여기까지 일차적으로 설정이 됐지만, 이제 테스트하고 싶은 컴포넌트(파일)를 연결해야 합니다. 먼저 루트 폴더에 .storybook폴더를 만들고 config.js파일 생성 후, 아래처럼 소스를 추가합니다.

 

import { configure } from "@storybook/react";
import interopRequireDefault from "babel-runtime/helpers/interopRequireDefault";

function startStories() {
  // 해당폴더에 Story이름이 들어간 파일 require목록 생성
  const cont = require.context("../src/stories", true, /Story/);
  // 위에서 만든 목록을 require로 추가
  cont.keys().forEach((srcFile) => {
    interopRequireDefault(cont(srcFile));
  });
}

configure(startStories, module);

 

 간단하게 설명드리면 스토리북을 실행할 때 구성 폴더를 참조해서, Story라는 이름이 들어간 파일을 require 합니다. 그럼 마지막으로 src폴더 안에 stories 폴더를 만들고, 밑에 있는 것처럼 3가지 파일을 추가합니다.

 

// ..\test_project\src\stories\Story_TestInput.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import Input from "../components/Input";

storiesOf("Test Input", module)
  .add("base", () => <Input name="name" />)
  .add("label", () => <Input name="name" label="라벨" />);

// ..\test_project\src\stories\Story_TestState.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import StateComponent from "../components/StateComponent";

storiesOf("Test State", module).add("base", () => <StateComponent />);

// ..\test_project\src\stories\Story_TestScroll.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import ScrollComponent from "../components/ScrollComponent";

storiesOf("Test Scroll", module).add("base", () => <ScrollComponent />);

 

 지난 포스팅에서 만들었던 컴포넌트를 각각의 이름으로 추가했습니다. 중요한 점은 상기한 config.js에서 story라는 문자를 찾아서 require 하기 때문에 이름에 Story 문자가 꼭 있어야 합니다. 처음 파일인 Story_TestInput.jsx은 add를 두 번 했는데, 대분류 "Test Input" 밑에 "base", "label"이라는 이름으로 소분류를 두 개 추가한 것입니다.

 

그럼 모든 준비가 되었으니 가시죠! > yarn storybook

 

스토리북 예시 화면

 

브라우저에 예시 화면처럼 나온다면 성공입니다. 왼쪽에 나열된 것은 위에서 추가한 3가지 컴포넌트(파일)이며, 오른쪽 화면은 실제 컴포넌트를 테스트해 볼 수 있는 공간입니다. 나머지 부분은 스토리북에서 자체 제공하는 기능이나 옵션이므로 한 번씩 조작해보시거나 스토리북 공식 사이트를 참고 바랍니다.

 

오늘은 여기까지 입니다. 이처럼 스토리북을 이용하면 각각의 컴포넌트를 테스트해보고 모듈화 할 수 있습니다.

 

참 편리하죠?

---

2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가