#1 React + Storybook + Puppeteer + Jest 개발환경 구축하기

목표 정의하기 & 도구 소개

vito

3 min readJul 13, 2019

🔖 목차

목표 정의하기 & 도구 소개
Setup Storybook + React
Setup @storybook/addon-storyshots
Setup @storybook/addon-storyshots-puppeteer

⛳ 다루는 내용

Storybook, Puppeteer
peer dependencies
Jest(Babel) 환경에서 webpack 사용할때 발생하는 이슈 처리하기
@storybook/addon-storyshots, @storybook/addon-storyshots-puppeteer
스크린샷 테스트에 대한 개인적인 생각

🔨 도구 소개

Storybook과 puppeteer에 대한 간단한 소개

🖼️ Storybook

다양한 도구가 있는 격리된 Example 환경

Storybook은 React, Vue 및 Angular의 UI Component를 개별적으로 개발할 수있는 오픈 소스 도구에요. 컴포넌트별로 격리된 환경을 제공해 주기 때문에 컴포넌트 단위로 개발할때는 유용한 도구랍니다.

📷 Puppeteer

Puppeteer는 DevTools 프로토콜을 통해 Chrome 또는 Chromium을 제어하기위한 고급 API를 제공하는 노드 라이브러리입니다 . puppeteer는 기본적으로 헤드리스 로 실행 되지만 전체 (헤드리스가 아닌) Chrome 또는 Chromium을 실행하도록 구성 할 수 있답니다.

여기서 puppeteer는 스크린샷을 찍기 위한 헤드리스 브라우저의 용도로 사용됩니다!

아래와 같은 스크립트로 간단하게 스크린샷을 찍을수 있답니다.

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
});

그럼 React + Storybook + Puppeteer + Jest 환경을 세팅해보겠습니다.