「프론트엔드 테스트 제대로 하기」 시리즈의 8편입니다. 전체 목차 보기 · 용어집 버튼은 눌러봐야, 입력창은 타이핑해봐야 진짜 테스트예요. user-event는 Testing Library 가족 중 상호작용 재현을 맡는 도구입니다 — 클릭 한 번에도 포커스 이동과 키 이벤트 순서까지 실제 브라우저처럼 밟아서, “사용자가 하면 되는데 테스트에선 안 되는” 간극을 없애주죠. 이 글에서 타이핑·클릭 테스트를 처음부터 완성합니다. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 7편입니다. 전체 목차 보기 · 용어집 Testing Library는 React를 비롯한 컴포넌트 테스트의 사실상 표준 도구입니다. 그런데 이 도구의 진짜 알맹이는 API가 아니라 철학 하나예요 — 컴포넌트 테스트에 들어서면 “클래스 이름으로 찾을까? 내부 state를 들여다볼까?” 하는 유혹이 생기는데, Testing Library는 단호하게 말합니다. 사용자가 하는 대로 하라. 이 글에서 그 철학이 무슨 뜻인지, 쿼리를 고르는 순서, 그리고 왜 이 방식이 접근성과 한 몸인지를 검색 컴포넌트를 직접 만들며 확인합니다. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 3편입니다. 전체 목차 보기 · 용어집 React + Vite + TypeScript 프로젝트에 테스트 환경을 붙이는 과정을 빈 폴더에서 첫 통과까지 통째로 따라 하는 글입니다. Vitest·Testing Library·jsdom을 설치하고, 설정 파일을 줄 단위로 이해하고, 첫 테스트를 초록불로 만들고, 세팅에서 자주 막히는 지점까지 — 이 글 하나로 끝나요. ...