Testing Library 썸네일형 리스트형 React 컴포넌트를 Storybook에서 문서화하고 테스트하기 Storybook은 컴포넌트를 고립된 환경에서 개발하고, 문서화하고, 상호작용 테스트까지 수행할 수 있는 표준 도구입니다. 실무에서는 UI 변경 리스크를 줄이고, 디자이너와 개발자 간 커뮤니케이션을 개선하며, 회귀를 자동으로 잡아내기 위해 Storybook을 적극적으로 활용합니다.1. 설치와 기본 설정프로젝트 루트에서 Storybook을 설치합니다. Vite 기반 React라면 아래처럼 초기화합니다.npx storybook@latest init --builder vite필수 스크립트를 확인/추가합니다.// package.json (일부){ "scripts": { "storybook": "storybook dev -p 6006", "build-storybook": "storybook build.. 더보기 React Testing Library로 컴포넌트 단위 테스트 작성하기 React Testing Library(RTL)는 사용자의 관점에서 컴포넌트를 테스트하도록 돕는 도구입니다. DOM 구조나 내부 상태 같은 구현 세부에 의존하지 않고, 접근성 가능한 쿼리로 화면을 찾고 사용자 이벤트를 시뮬레이션합니다. 실무에서 바로 쓸 수 있는 설정과 패턴을 예제로 정리합니다.1. 설치와 기본 설정Jest와 RTL, jest-dom, user-event를 설치합니다. 테스트 환경은 jsdom이어야 합니다.// 설치// npmnpm i -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom// yarnyarn add -D jest @testing-lib.. 더보기 이전 1 다음