프론트엔드 테스트 제대로 하기 on Codeslog https://www.codeslog.com/series/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%95%98%EA%B8%B0/ Recent content in 프론트엔드 테스트 제대로 하기 on Codeslog Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.150.0 ko Tue, 14 Jul 2026 01:05:00 +0900 MSW로 네트워크 모킹 — API를 격리하기 https://www.codeslog.com/posts/frontend-testing-msw/ Tue, 14 Jul 2026 01:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-msw/ 테스트에서 진짜 API를 부르면 느리고 불안정합니다. MSW(Mock Service Worker)로 네트워크 계층을 격리해 안정적으로 테스트하는 법을 다룹니다. 폼·상호작용·상태 테스트 — user-event로 https://www.codeslog.com/posts/frontend-testing-user-event/ Mon, 13 Jul 2026 23:39:00 +0900 https://www.codeslog.com/posts/frontend-testing-user-event/ 타이핑, 클릭, 선택… 실제 사용자의 상호작용을 재현하는 user-event로 폼과 상태 변화를 테스트하는 법을 다룹니다. Testing Library 철학 — 사용자처럼 쿼리하기 https://www.codeslog.com/posts/frontend-testing-testing-library/ Fri, 10 Jul 2026 01:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-testing-library/ React Testing Library의 핵심 철학 '사용자처럼 테스트하기'. getByRole 중심의 쿼리 우선순위와, 구현이 아닌 동작을 테스트해 리팩터링을 견디는 법을 익힙니다. mock·stub·spy — 테스트 더블 제대로 이해하기 https://www.codeslog.com/posts/frontend-testing-test-doubles/ Fri, 10 Jul 2026 00:44:00 +0900 https://www.codeslog.com/posts/frontend-testing-test-doubles/ mock, stub, spy, fake… 헷갈리는 테스트 더블 용어를 정리합니다. Vitest vi.fn() 하나로 셋을 다루는 법(Jest도 거의 동일)과 어디까지 가짜로 바꿀지의 기준까지. 비동기·타이머·에러를 테스트하는 법 https://www.codeslog.com/posts/frontend-testing-async/ Wed, 08 Jul 2026 00:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-async/ Promise, setTimeout, 그리고 실패 케이스. Vitest의 resolves·rejects 매처와 가짜 타이머(fake timers)로, 프론트엔드 비동기 코드를 안정적으로 테스트하는 방법을 다룹니다. 단위 테스트 기초 — 순수 함수·경계값·AAA 패턴 https://www.codeslog.com/posts/frontend-testing-unit-basics/ Mon, 06 Jul 2026 00:20:00 +0900 https://www.codeslog.com/posts/frontend-testing-unit-basics/ 가장 튼튼한 기초, 단위 테스트. 순수 함수를 테스트하는 법과 경계값·AAA(Arrange-Act-Assert) 패턴을 Vitest 실전 예제로 익힙니다. Jest 사용자도 그대로 따라올 수 있어요. 데모 앱에 Vitest 붙이기 — 첫 초록불까지 https://www.codeslog.com/posts/frontend-testing-setup-vitest/ Sun, 05 Jul 2026 00:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-setup-vitest/ React + Vite + TypeScript 데모 앱에 Vitest와 Testing Library를 설치하고, 첫 테스트를 초록불로 만드는 과정을 따라 합니다. 무엇을 얼마나 테스트할까 — 커버리지 100%의 함정 https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ Sat, 04 Jul 2026 22:34:00 +0900 https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ 테스트는 많이 짤수록 좋은 걸까요? 무엇을 먼저 테스트할지 판단하는 기준과, 커버리지 숫자에 속지 않는 법을 정리합니다. 테스트 용어, 여기서 한 번에 — 프론트엔드 테스트 용어집(부록) https://www.codeslog.com/posts/frontend-testing-glossary/ Sat, 04 Jul 2026 22:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-glossary/ 단위 테스트부터 flaky, 픽스처, MCP까지 — 「프론트엔드 테스트 제대로 하기」 시리즈에 나오는 용어를 학습 순서대로 초보자도 이해할 수 있게 풀어 정리했습니다. 읽다가 낯선 단어를 만나면 언제든 이 페이지로 돌아오세요. 왜 지금 프론트엔드 테스트인가 — AI 시대의 안전벨트 https://www.codeslog.com/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 22:40:00 +0900 https://www.codeslog.com/posts/frontend-testing-why-now/ AI가 코드를 쏟아내는 시대일수록 테스트가 더 중요해졌습니다. 「프론트엔드 테스트 제대로 하기」 시리즈의 첫 글로, 테스트가 주는 것과 피라미드·트로피 전략, 그리고 앞으로 함께 만들 커리큘럼을 정리합니다.