테스트 — Jest + React Testing Library + Playwright E2E

Q1. React Testing Library에서 버튼 요소를 찾는 가장 권장되는 방법은?

screen.getByClassName("btn-primary") screen.getByTestId("submit-btn") screen.getByRole("button", { name: "제출" }) document.querySelector("button")

💡 RTL은 접근성 기반 쿼리를 권장합니다. `getByRole`은 ARIA 역할을 기반으로 요소를 찾아 실제 사용자와 스크린 리더가 인식하는 방식과 동일하게 테스트합니다. `getByTestId`는 최후 수단으로만 사용합니다.

Q2. 비동기 컴포넌트에서 데이터 로딩 후 나타나는 요소를 테스트하는 올바른 방법은?

getByText를 즉시 사용한다 waitFor + getByText를 사용한다 findByText를 사용한다 (waitFor를 내부적으로 사용) setTimeout으로 기다린다

💡 `findByText`는 내부적으로 `waitFor`를 사용하여 요소가 나타날 때까지 폴링합니다. `await screen.findByText("내용")`은 가장 간결한 비동기 쿼리 방법입니다. `findBy*` 쿼리는 항상 await과 함께 사용합니다.

Q3. `userEvent.setup()`을 사용하는 이유가 아닌 것은?

더 실제적인 사용자 이벤트 시뮬레이션 포커스, 호버 등 부수 효과 처리 자동으로 act() 래핑 Playwright와 동일한 브라우저 환경 제공

💡 `userEvent`는 JSDOM 환경에서 실행됩니다. Playwright는 실제 브라우저(Chromium, Firefox, WebKit)를 제어하며, `userEvent`와는 다른 도구입니다. userEvent는 단순 fireEvent보다 실제 사용자 동작(타이핑, 클릭 시 포커스 이동 등)을 더 정확히 시뮬레이션합니다.

Q4. Playwright E2E 테스트에서 `await expect(page).toHaveURL(/dashboard/)`의 의미는?

페이지 제목이 "dashboard"를 포함하는지 확인 현재 URL이 /dashboard/ 정규식 패턴과 일치하는지 확인 (자동 대기) 페이지에 "dashboard" 텍스트가 있는지 확인 HTTP 응답 코드를 확인

💡 `toHaveURL`은 현재 페이지 URL을 확인합니다. Playwright의 expect는 자동 대기(auto-wait) 기능이 있어, 조건이 만족될 때까지(기본 5초) 재시도합니다. 리다이렉트 완료를 명시적으로 기다리지 않아도 됩니다.

Q5. 단위 테스트, 통합 테스트, E2E 테스트의 트레이드오프를 올바르게 설명한 것은?

E2E 테스트가 가장 빠르고 저렴하므로 E2E만 작성한다 단위 테스트는 실행이 빠르고 저렴하지만 통합 문제를 발견하지 못할 수 있다 통합 테스트는 실제 브라우저에서 실행된다 Playwright는 단위 테스트에 적합하다

💡 테스트 피라미드: 단위 테스트(빠름, 저렴, 개별 로직 검증) → 통합 테스트(중간, 컴포넌트 상호작용) → E2E(느림, 비쌈, 실제 사용자 시나리오). 각 층을 균형있게 구성하는 것이 중요합니다. 단위 테스트를 기반으로 하고 E2E는 핵심 시나리오만 커버합니다.

테스트 — Jest + React Testing Library + Playwright E2E

퀴즈 통과!

아쉽네요!