「프론트엔드 테스트 제대로 하기」 시리즈의 6편입니다. 전체 목차 보기 · 용어집 “mock 써서 테스트했어요"라는 말, 실은 서로 다른 네 가지 개념(stub·spy·mock·fake)을 뭉뚱그린 표현입니다. 이 글 하나로 네 용어의 차이, Vitest vi.fn() 하나로 전부 커버하는 법, 그리고 “어디까지 가짜로 바꿀 것인가"의 기준까지 정리합니다. 한 번 정리해두면 테스트 코드를 읽고 쓰는 눈이 훨씬 선명해져요. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 5편입니다. 전체 목차 보기 · 용어집 현실의 코드는 기다립니다. API 응답을 기다리고, 타이머를 기다리죠. 그래서 비동기 테스트는 프론트엔드에서 가장 먼저 부딪히는 벽인데, 어렵게 느껴지는 이유는 사실 딱 하나예요 — “언제 검증하느냐”. 답이 도착하기 전에 채점하면, 빈 답안지를 채점하는 셈이 되거든요. 이 글 하나로 Promise 검증(resolves/rejects), 가짜 타이머, 실패 케이스까지 — 기다리는 코드를 다루는 무기를 전부 챙깁니다. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 4편입니다. 전체 목차 보기 · 용어집 단위 테스트는 모든 테스트의 출발점입니다. 함수 하나를 앞에 두고 “이 입력이면 이 출력"을 못 박는, 가장 작고 가장 빠른 검증이죠. 이 글 하나로 단위 테스트가 무엇인지부터 순수 함수·AAA 패턴·경계값까지, 실전 코드로 기초를 완성합니다. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 3편입니다. 전체 목차 보기 · 용어집 React + Vite + TypeScript 프로젝트에 테스트 환경을 붙이는 과정을 빈 폴더에서 첫 통과까지 통째로 따라 하는 글입니다. Vitest·Testing Library·jsdom을 설치하고, 설정 파일을 줄 단위로 이해하고, 첫 테스트를 초록불로 만들고, 세팅에서 자주 막히는 지점까지 — 이 글 하나로 끝나요. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 부록입니다. 본문을 읽다가 낯선 용어를 만나면 언제든 이 페이지로 돌아오세요. 전체 목차 보기 프론트엔드 테스트를 배우다 보면 낯선 용어가 쏟아집니다. mock과 stub은 뭐가 다른지, getBy와 queryBy는 언제 갈리는지, 커버리지 숫자는 왜 그대로 믿으면 안 된다는 건지 — 그런 용어들을 이 페이지 하나에 전부 모았습니다. 항목마다 “이게 뭔지"에서 멈추지 않고 “왜 필요한지”, “언제 쓰는지"까지 담았어요. ...
「프론트엔드 테스트 제대로 하기」 시리즈의 1편입니다. 전체 목차 보기 · 용어집 “테스트요? 지금도 잘 돌아가는데요.” 한 번쯤 해봤거나, 들어봤을 말이죠. 저도 오랫동안 그랬습니다. 눈으로 보고, 손으로 클릭해보고, “어 되네” 하면 그걸로 충분하다고 생각했어요. 그런데 기능이 늘고, 코드를 고칠 때마다 “이거 고치면 저쪽이 안 터지나?” 하는 불안이 스멀스멀 올라오기 시작하면, 그때가 바로 테스트가 필요해지는 순간입니다. ...