Storybook은 개발자들이 컴포넌트를 독립적으로 개발하고 테스트하는 데 사용되는 도구입니다. 이를 통해 개발자는 컴포넌트를 재사용하고 시각적으로 확인할 수 있습니다. 그러나 Storybook을 사용하여 개발한 컴포넌트가 실제 앱에 적용되었을 때, 테스트 커버리지를 어떻게 검증할 수 있을까요? 이번 블로그에서는 Storybook과 자바스크립트 앱의 테스트 커버리지 검증 방법에 대해 알아보겠습니다.

커버리지 도구 설정

테스트 커버리지를 검증하기 위해서는 자바스크립트 앱에 커버리지 도구를 설정해야 합니다. 대표적인 도구로 Istanbul이 있습니다. Istanbul은 코드의 테스트 커버리지를 측정하고 보고하는 데 사용되는 도구입니다. 다음 명령어를 통해 Istanbul을 설치할 수 있습니다.

npm install --save-dev nyc

테스트 코드 작성

테스트 커버리지를 검증하기 위해서는 테스트 코드를 작성해야 합니다. Jest와 같은 테스트 프레임워크를 이용하여 작성할 수 있습니다. 다음은 Jest를 이용한 테스트 코드 예시입니다.

import { render, screen } from '@testing-library/react';
import Button from '../Button';

test('renders button component', () => {
  render(<Button />);
  const buttonElement = screen.getByRole('button');
  expect(buttonElement).toBeInTheDocument();
});

테스트 코드를 작성할 때, Storybook에서 개발한 컴포넌트를 테스트하는 것을 잊지 마세요.

커버리지 계산

커버리지 도구를 사용하여 테스트를 실행하고 테스트 커버리지를 계산할 수 있습니다. Istanbul을 사용한 예시는 다음과 같습니다.

npx nyc jest

위 명령어를 실행하면 Jest를 통해 작성한 테스트 코드가 실행되고, 결과에 대한 커버리지 보고서가 생성됩니다. 이 보고서를 통해 어떤 부분의 테스트 커버리지가 부족한지 확인할 수 있습니다.

Storybook 커버리지 검증 설정

테스트 커버리지를 검증하기 위해서는 Storybook의 설정파일을 수정해야 합니다. .storybook/main.js 파일을 열고 다음 설정을 추가합니다.

module.exports = {
  // ...
  addons: [
    // ...
    {
      name: '@storybook/addon-storyshots',
      options: {
        jestConfigFile: '.storybook/jest.config.js',
        suite: 'Visual tests',
        storyKindRegex: /^((?!.*?skipstorybook).)*$/,
      },
    },
    // ...
  ],
};

이제 Storybook을 실행하고, 테스트 커버리지 도구로 테스트 스냅샷을 실행하여 커버리지를 검증할 수 있습니다.

결론

Storybook과 자바스크립트 앱의 테스트 커버리지를 검증하는 방법에 대해 알아보았습니다. 커버리지 도구를 설정하고 테스트 코드를 작성하여 앱의 커버리지를 측정하고 검증할 수 있습니다. 이를 통해 개발한 컴포넌트의 품질과 신뢰도를 높일 수 있습니다.

더 자세한 내용은 다음 참고 자료들을 확인해보세요.

• Storybook 공식 문서
• Istanbul GitHub Repository
• Jest 공식 문서

주의: 이 블로그 글은 참고용으로 제공되며, 실제 프로젝트에 적용하기 전에 환경에 맞게 수정이 필요합니다.