[javascript] Storybook과 자바스크립트 자동화 테스트 도구의 통합

27 Nov 2023

javascript

Storybook은 웹 컴포넌트를 개발하고 시각적으로 확인할 수 있는 도구입니다. 이를 통해 개발자는 컴포넌트를 독립적으로 테스트하고, 빠르게 피드백을 받을 수 있습니다.

하지만 Storybook만으로는 컴포넌트의 기능적인 테스트를 수행하기 어렵습니다. 이를 위해 자바스크립트 자동화 테스트 도구를 사용하여 Storybook과 통합할 수 있습니다.

Jasmine을 사용한 Storybook 테스트

Jasmine은 자바스크립트 테스트 프레임워크로서, Storybook과의 통합을 지원합니다.

먼저 Jasmine을 프로젝트에 설치합니다.

npm install jasmine --save-dev

그리고 테스트 파일을 작성합니다. 예를 들어, Button.spec.js 파일에는 Button 컴포넌트의 테스트를 작성할 수 있습니다.

describe('Button', () => {
  it('renders correctly', () => {
    const button = document.createElement('button');
    button.innerText = 'Click me';

    document.body.appendChild(button);

    expect(button.innerText).toBe('Click me');
  });

  it('changes text on click', () => {
    const button = document.createElement('button');
    button.innerText = 'Click me';

    document.body.appendChild(button);

    button.click();

    expect(button.innerText).toBe('Button clicked');
  });
});

이제 Storybook에 Jasmine을 통합시켜 테스트를 실행할 수 있습니다. storybook.test.js 파일을 생성하고 다음과 같은 코드를 작성합니다.

import Jasmine from 'jasmine';

const jasmine = new Jasmine();
jasmine.loadConfigFile('jasmine.json');
jasmine.execute();

마지막으로 package.json 파일의 scripts 섹션에 다음과 같은 스크립트를 추가합니다.

"test": "node storybook.test.js"

이제 npm test 명령어를 실행하면 Storybook과 Jasmine을 통합한 테스트가 실행됩니다.

Jest를 사용한 Storybook 테스트

Jest는 Jasmine에 기반한 JavaScript 테스트 프레임워크입니다. 여러가지 기능과 유용한 API를 제공하여 Storybook 테스트를 더욱 효과적으로 할 수 있습니다.

먼저 Jest를 프로젝트에 설치합니다.

npm install jest --save-dev

그리고 Jest 설정 파일인 jest.config.js 파일을 생성하고 다음과 같은 내용을 작성합니다.

module.exports = {
  testMatch: ['**/*.spec.js'],
};

이제 테스트를 작성합니다. 예를 들어, Button.spec.js 파일에는 Button 컴포넌트의 테스트를 작성할 수 있습니다.

describe('Button', () => {
  it('renders correctly', () => {
    const button = document.createElement('button');
    button.innerText = 'Click me';

    document.body.appendChild(button);

    expect(button.innerText).toBe('Click me');
  });

  it('changes text on click', () => {
    const button = document.createElement('button');
    button.innerText = 'Click me';

    document.body.appendChild(button);

    button.click();

    expect(button.innerText).toBe('Button clicked');
  });
});

마지막으로 package.json 파일의 scripts 섹션에 다음과 같은 스크립트를 추가합니다.

"test": "jest"

이제 npm test 명령어를 실행하면 Storybook과 Jest를 통합한 테스트가 실행됩니다.

결론

Storybook과 자바스크립트 자동화 테스트 도구를 통합하면 컴포넌트의 시각적인 확인뿐만 아니라 기능적인 테스트도 쉽게 할 수 있습니다. Jasmine이나 Jest와 같은 테스트 프레임워크는 이러한 통합을 가능하게 해주는 강력한 도구입니다.