Storybook v5.2는 새로운 이야기 형식인 Component Story Format(CSF)을 도입하여 이전의stories Of에서 교체할 예정입니다.앞으로의 준비를 위해 간단하게 손을 흔들면서 장점을 접한다.
설치된 저장소가 여기에 있습니다.
https://github.com/suzukalight/study-storybook-component-story-format

속공으로 해봐.

나는 아무것도 없어도 우선 마작을 해 보는 것이 좋다고 생각한다.다음 절차에 따라 시도할 수 있다.

$ npx create-react-app study-storybook-component-story-format --typescript
$ cd study-storybook-component-story-format
$ yarn add -D @storybook/react babel-loader @babel/core @babel/plugin-syntax-jsx

/package.json

  "scripts": {
    "storybook": "start-storybook"
  }

/.storybook/config.js

import { configure } from '@storybook/react';

configure(require.context('../src', true, /\.stories\.tsx$/), module);

/src/components/atoms/Button/__stories__/index.stories.tsx

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

$ yarn storybook

storiesOf API를 사용하지 않고 export를 하는 것이 특징이다.다음 장에서 자세히 보다.

어셈블리 스토리지 형식 개요

Component Story Format - Storybook - Medium

Component Story Format (CSF)

개념

이야기는 특정 상태 구성 요소의 예시를 렌더링하는 코드 세션입니다.
(위 URL 참조. 번역: 구글 번역)
이전의 스토리북은stories Of에서 구성 요소 모드를 정의했지만stories Of 형식에서는 당연히 스토리북을 잠그기 때문에 어렵게 정의한'구성 요소 상태'는 다른 도구에 적용하기 어렵다.
CSF는 Storybook v5.2에 새로 도입된 형식입니다.그것의 핵심 개념은 이stories Of를 휴대성을 가지게 하는 것이다.그것은 Jest와 Cypress 같은 다른 도구와 합작할 수 있도록 설계되었다.
구체적으로 말하면 구성 요소와 상태를 총괄적인 함수(부분)로 정의한다.

export const disabled = () => <Counter disabled />;

내용 설명 자체는stories Of와 큰 변화가 없지만 함수로 정의함으로써 구성 요소와 상태를 처리할 수 있습니다. 예를 들어 "disabled 단추를 렌더링하는 함수", "사용자 정보를 포함하는 테이블을 렌더링하는 함수"등입니다.나는 이런 처리하기 쉬운 형식으로 재정립하는 것이 가장 큰 장점이라고 생각한다.

묘사법

CSF는 export를 구속하여 정보의 처리 방법을 정의합니다.구체적으로 말하면 default export에서 이야기와 관련된 속성을 제공하고named export에서 각각 하나의 이야기를 제공한다.

export default {title: 'atoms|Button'};

export const withText = () => <Button>Hello</Button>;
export const withEmoji = () => <Button>😀😎👍💯</Button>;

이 예에서 Storybook은 ATOMS 클래스의 Button 그룹을 With Text와 With Emoji라는 두 가지 이야기를 정의한 것으로 보고 Storybook에 표시합니다.

위의 예를 제외하고 속성 측면에서는'어떤 함수를 이야기로 처리할 수 있는지 지정'등을 진행할 수 있다.자세한 내용은 이 문서 저장 을 참조하십시오.

Storybook 및 react-testing-library에서 CSF 사용

CSF를 실제로 만들고 여러 환경에서 사용합니다.
예를 들어 카운터 구성 요소와 CSF를 만들고 Storybook과react-testing-library 테스트에 사용할 예시를 만듭니다.

카운터 구성 요소를 props로 버튼에disabled를 제공할 수 있습니다.이를 상태 모드로 스토리북에서 렌더링하고react-testing-library에서 실행할 때 테스트합니다.
Counter 구성 요소
/src/components/atoms/Counter/index.tsx

import React, { useState } from 'react';

interface CounterProps {
  disabled?: boolean;
}

const Counter = ({ disabled }: CounterProps) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button disabled={disabled} onClick={() => setCount(count + 1)}>
        increment
      </button>
    </div>
  );
};

export default Counter;

Component Story Format
/src/components/atoms/Counter/__stories__/index.stories.tsx

import React from 'react';
import Counter from '..';

export default { title: 'atoms|Counter' };

export const initial = () => <Counter />;

export const disabled = () => <Counter disabled />;

두 가지 상태의 저장소를 정의했습니다. 각각 초기와disabled입니다.이번에는 CSF가 Storybook과react-testing-library에 동시에 사용될 수 있는지 검증하고 싶습니다.

Storybook을 통한 CSF 사용

yarn storybook.기대한 바와 같이 Storybook은 자동으로 CSF를 식별하여 이야기로 나타낸다.

react-testing-library를 통한 CSF 사용

CSF 파일은 두 가지 상태를 정의합니다: initial/disabled.이것이 올바르게 행동했는지 확인하기 위해 버튼을 누르는 사건이 발생하고 싶습니다.react-testing-library로 이동해 보세요.
테스트 파일에서 import CSF는 enabled/disabled의 두 가지 상태 모드로 사용됩니다.버튼에 click을 터치하고 테스트 계수기 값이 예상대로 바뀌었는지 쓰기;
/src/components/atoms/Counter/__tests__/index.tsx

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

import { initial, disabled } from '../__stories__/index.stories';

describe('counter interactivity', () => {
  it('should increment when enabled', () => {
    const comp = render(initial());
    fireEvent.click(comp.getByText('increment'));
    expect(comp.getByText('1')).toBeTruthy();
  });
  it('should do nothing when disabled', () => {
    const comp = render(disabled());
    fireEvent.click(comp.getByText('increment'));
    expect(comp.getByText('0')).toBeTruthy();
  });
});

yarn test에서 테스트를 실행합니다.시험을 무사히 통과했습니다!

총결산

Storybook v5.2에 새로 등장한 Component Story Format은 이야기의 정의를 "특정 상태 구성 요소의 예시를 렌더링하는 코드 세션"으로 처리할 수 있는 메커니즘이다.
구성 요소와 상태를 한 그룹으로 설정하고 함수로 내보내기 때문에 이동성을 크게 높일 수 있다. 스토리북뿐만 아니라 테스트와 문서 등에 구성 요소의 다양한 상태를 제공할 수 있다.
이번에는 구체적인 예로 CSF에서 계수기 구성 요소의disabled 상태를 정의했고 외관에 관한 행위는 Storybook에서, 이벤트 처리에 관한 행위는react-testing-library에서 두 가지 측면에서 테스트할 수 있다.
이야기는 이동성이 있기 때문에 스토리북에만 쓰인 구성 요소의 상태를 각종 도구에 적용할 수 있는 환경이 생겼다.나는 대응하는 도구가 증가할 가능성도 높다고 생각한다.기대하면서 계속 가장!

최종 품목

설치된 저장소가 여기에 있습니다.
https://github.com/suzukalight/study-storybook-component-story-format