New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Visual Testing Handbook
React
Chapters
  • 소개
  • 작업 흐름(Work Flow)
  • 시각적 TDD
  • 자동화
  • 마무리

마무리

시각적 버그들에 안녕을

개발자들은 그들이 가진 시간 중 21%를 버그를 고치는데 씁니다. UI 외관을 디버깅하는 건 특히 좌절스러울 수 있습니다. 재생산(Reproduction)을 하기위해서는 다양한 브라우저를 실행하고, 앱을 올바른 상태로 만들고, DOM을 통과해야 합니다. 판돈도 더 커지는데 - QA에서 잡히지 않은 버그를 수정하는 비용은 QA보다 프로덕션에서 수정하는데 5-10배더 많은 시간이 소요됩니다.

수천 개의 프런트엔드 팀들이 스토리북(Storybook)을 이용해 시각적 테스트를 하는 건 이제 상식입니다. 스토리북은 컴포넌트를 구축하고 시각적 테스트를 작성하는 데 도움이 됩니다. 컴포넌트 수준에서 테스트를 실행하면 버그의 근본 원인을 정확히 짚을 수 있습니다. 이미지 스냅샷을 찍으면 회귀 에러를 자동으로 포착하는 데 도움이 됩니다. 이는 사람들이 몰래 끼어든 버그들을 걱정하지 않고 UI를 전달할 수 있음을 의미합니다.

이 가이드를 통해 시각적 테스팅의 기본을 소개했습니다. Tom과 나는 여러분이 이번에 배운 내용들을 바탕으로 자신만의 프로젝트들을 만들어보길 희망합니다. 스토리북 메일링 리스트에 가입하셔서 더 유용한 글과 가이드 소식들을 받아보세요.

이 튜토리얼의 샘플 코드

지금까지 잘 따라왔다면, 당신의 저장소와 배포한 스토리북은 다음과 같이 보여야 합니다.

더 많은 자료들

더 깊이 파고들고 싶나요? 여기 유용한 추가 자료들이 있습니다 -

Is this free guide helping you? Tweet to give kudos and help other devs find it.
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI