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

목표 정의하기 & 도구 소개

vito
Jul 13 · 3 min read

🔖 목차

⛳ 다루는 내용

  • 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 환경을 세팅해보겠습니다.

🏁 Todo App 마크업 복사

우선 샘플 환경을 준비합니다.

샘플 코드

eslint, webpack, babel 등의 기본적인 환경 설정을 하고 Todo App의 Html, css 를 React 로 전환한 환경입니다.

그리고 다음 단계는 아래 링크를 확인해주세요!

Setup Storybook + React

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade