스토리북은 개발자들이 컴포넌트를 독립적으로 디자인, 개발, 테스트할 수 있도록 도와주는 도구입니다. Next.js와 함께 사용하면 Next.js 애플리케이션의 컴포넌트를 더 효과적으로 테스트할 수 있습니다. 이번 글에서는 Next.js에서 스토리북 테스트를 작성하는 방법에 대해 알아보겠습니다.

1. 스토리북 설치하기

먼저, Next.js 프로젝트에서 스토리북을 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install @storybook/react --save-dev

또는 yarn을 사용한다면 아래 명령어를 사용할 수 있습니다:

yarn add @storybook/react --dev

2. 스토리 파일 작성하기

스토리 파일은 컴포넌트의 다양한 상태와 속성을 보여주는 역할을 합니다. .stories.js 또는 .stories.jsx 확장자를 가진 파일로 작성됩니다. 다음은 예시 스토리 파일의 내용입니다:

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';

storiesOf('Button', module)
  .add('default', () => <Button>Click me</Button>)
  .add('disabled', () => <Button disabled>Click me</Button>);

위의 코드에서는 Button 컴포넌트를 Button 스토리로 등록하고, 기본 상태와 비활성화 상태의 버튼을 보여줍니다.

3. 스토리북 실행하기

스토리 파일을 작성한 후에는 스토리북을 실행하여 컴포넌트를 확인할 수 있습니다. 다음 명령어를 사용하여 스토리북을 실행할 수 있습니다:

npx start-storybook -p 6006

스토리북이 정상적으로 실행되면 브라우저에서 http://localhost:6006 주소로 접속하여 스토리를 확인할 수 있습니다.

4. 스토리북 테스트 작성하기

스토리북은 다양한 테스트 도구와 통합할 수 있습니다. 예를 들어, Jest를 사용하여 스토리북 테스트를 작성할 수 있습니다. 테스트를 작성하기 전에 @storybook/testing-react 패키지를 설치해야 합니다:

npm install @storybook/testing-react --save-dev

또는 yarn을 사용한다면 아래 명령어를 사용할 수 있습니다:

yarn add @storybook/testing-react --dev

다음은 Jest를 사용하여 스토리북 컴포넌트를 테스트하는 예시 코드입니다:

import { mount } from '@storybook/testing-react';
import Button from '../components/Button';

describe('Button', () => {
  it('renders correctly', async () => {
    const { getByText } = await mount(<Button>Click me</Button>);
    
    expect(getByText('Click me')).toBeInTheDocument();
  });
});

위의 코드에서는 Button 컴포넌트를 마운트하고, 텍스트가 정상적으로 렌더링되는지 확인합니다.

이제 Next.js에서 스토리북 테스트를 작성하는 방법에 대해 알아보았습니다. 스토리북을 사용하여 컴포넌트를 테스트하면 개발 과정에서 더욱 효율적으로 작업할 수 있습니다.

#NextJS #스토리북