[스토리북] 리액트 컴포넌트 UI 테스트

스토리북 구동모습

설치

• yarn add --dev @storybook/react @storybook/addons @storybook/addon-actions storybook-addon-jsx
• yarn add --dev sass-loader node-sass

실행 명령어

• "storybook": "start-storybook -p 9001 -c .storybook"

파일 세팅

설정 1

• 스토리북 설정파일을 모아놓는 .storybook 폴더를 생성
• 하단 탭에서 action메뉴와 jsx를 활성화하기 위한 addons.js

// .storybook/addons.js
import '@storybook/addon-actions/register';
import 'storybook-addon-jsx/register';

설정 2

• loadStories함수 안에 require('../src/stories/InputStory'); 이런식으로 하나씩 등록하기는 번거로우니 자동으로 등록하는 로직을 작성
• /src/stories 경로에 /Story.js 규칙에 맞는 파일을 가져오게 함

// .storybook/config.js
import { configure, setAddon } from '@storybook/react';
import interopRequireDefault from 'babel-runtime/helpers/interopRequireDefault';
import JSXAddon from 'storybook-addon-jsx';

function loadStories() {
  // require('../src/stories/InputStory');
  // require('../src/stories/NewCounterStory');

  // context()로 /stories의 js 파일 가져옴
  const ctx = require.context('../src/stories', true, /Story\.js/);  
  ctx.keys().forEach((srcFile) => {
    interopRequireDefault(ctx(srcFile));
  });

  /*
  ctx.keys() = ["./InputStory.js", "./NewCounterStory.js"]
  ctx = webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
  } 
  */
}

setAddon(JSXAddon);
configure(loadStories, module);

스토리 컴포넌트

• 파일 생성할때 명명 규칙은 ###Story.js를 지켜야 자동 import됨
• addWithJSX()는 JSX탭에 컴포넌트 모양도 출력
• action()은 함수가 실행 됬을때 출력될 로그

// src/stories/InputStory.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Input from '../03/Input';

storiesOf('Input', module)
  .addWithJSX('기본 설정', () => <Input name="name" />)
  .addWithJSX('label 예제', () => <Input name="name" label="이름" />)
  .addWithJSX('onChange 예제', () => <Input name="name" onChange={action('onChange 이벤트 발생')} />)

스토리북에서 scss 사용 가능하게 설정

• materializecss
• scss 파일 다운받아 src/sass 경로에 넣기

webpack.config.js

• 스토리북에 scss 적용하기 위한 웹팩 추가 설정

// .storybook/webpack.config.js
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["sass-loader"],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};