프론트엔드 테스트 관련 질문 정리

프론트엔드 테스트는 코드 품질을 보장하고 버그를 미리 발견하는 중요한 과정이에요.

최근 회사들이 테스트 코드 작성 능력을 매우 중요하게 보고 있어서, 면접에서도 자주 다뤄지는 주제입니다.

테스트 기초 개념

1. 프론트엔드에서 테스트가 왜 중요한가요? 사용자와 직접 만나는 부분이라서 버그가 바로 사용자 경험으로 이어져요. 복잡한 UI 상호작용이나 비동기 로직에서 예상치 못한 문제가 발생할 수 있고, 리팩토링할 때도 기존 기능이 제대로 동작하는지 확인이 필요해요. 마치 요리를 다 하고 나서 간을 보는 것처럼 필수적인 과정이에요.

2. 테스트 피라미드에 대해 설명해주세요. 단위 테스트(Unit Test)를 가장 많이 작성하고, 통합 테스트(Integration Test)를 중간 정도, E2E 테스트(End-to-End Test)를 가장 적게 작성하는 구조예요. 아래로 갈수록 빠르고 안정적이지만 범위가 좁고, 위로 갈수록 느리고 불안정하지만 실제 사용자 시나리오에 가까워요.

3. 단위 테스트와 통합 테스트의 차이는? 단위 테스트는 함수나 컴포넌트 하나를 독립적으로 테스트하는 것이고, 통합 테스트는 여러 컴포넌트나 모듈이 함께 동작하는 것을 테스트해요. 단위 테스트는 빠르고 디버깅이 쉽지만, 통합 테스트는 실제 사용 시나리오에 더 가까워요.

React 컴포넌트 테스트

4. React 컴포넌트는 어떻게 테스트하나요? React Testing Library를 주로 사용해요. 컴포넌트를 렌더링하고, 사용자가 실제로 하는 행동(클릭, 입력 등)을 시뮬레이션해서 예상한 결과가 나오는지 확인해요. 구현 세부사항보다는 사용자 관점에서 테스트하는 것이 중요해요.

5. React Testing Library와 Enzyme의 차이점은? Enzyme은 컴포넌트의 내부 상태나 메서드에 직접 접근할 수 있어요. React Testing Library는 사용자가 보고 상호작용하는 방식으로만 테스트할 수 있게 제한해요. 후자가 더 실용적이고 리팩토링에 강한 테스트를 만들 수 있어요.

6. Mock을 언제 사용해야 하나요? 외부 API 호출, 타이머 함수, 복잡한 외부 라이브러리 등을 테스트할 때 사용해요. 실제 API를 호출하면 테스트가 느려지고 불안정해지니까, 가짜 응답을 만들어서 테스트해요. 하지만 너무 많이 사용하면 실제 동작과 달라질 수 있어요.

7. 비동기 로직은 어떻게 테스트하나요? waitFor, findBy 같은 비동기 유틸리티를 사용해요. API 호출 후 데이터가 렌더링되기를 기다리거나, 사용자 이벤트 후 상태 변화를 확인할 때 사용해요. async/await와 함께 사용하면 깔끔하게 작성할 수 있어요.

테스트 도구와 환경

8. Jest의 주요 기능들은? JavaScript 테스트 프레임워크로, 테스트 실행, 어설션(assertion), 모킹, 스냅샷 테스트 등을 제공해요. Zero Configuration으로 바로 사용할 수 있고, 코드 커버리지 리포트도 생성해줘요.

9. 스냅샷 테스트는 언제 유용한가요? 컴포넌트의 렌더링 결과가 예상과 같은지 확인할 때 사용해요. 의도하지 않은 UI 변경을 잡아낼 수 있지만, 너무 자주 업데이트해야 하거나 의미없는 변경까지 잡아내는 단점이 있어요.

10. E2E 테스트 도구로는 무엇이 있나요? Cypress, Playwright, Puppeteer 등이 있어요. 실제 브라우저에서 사용자 시나리오를 자동화해서 테스트할 수 있어요. 가장 확실하지만 설정이 복잡하고 실행 시간이 오래 걸려요.

테스트 작성 실무

11. 좋은 테스트 코드의 특징은? 빠르고, 독립적이고, 반복 가능하고, 자체 검증이 가능하고, 적시에 작성되어야 해요(FIRST 원칙). 테스트명도 명확해서 실패했을 때 어떤 기능에 문제가 있는지 바로 알 수 있어야 해요.

12. 테스트 커버리지는 얼마나 높여야 하나요? 100% 커버리지가 목표가 아니라, 중요한 비즈니스 로직과 복잡한 부분을 우선적으로 테스트하는 것이 좋아요. 보통 70-80% 정도면 충분하다고 여겨져요. 숫자보다는 테스트의 품질이 더 중요해요.

13. TDD(Test-Driven Development)의 장단점은? 테스트를 먼저 작성하고 구현하는 방식이에요. 코드 품질이 높아지고 리팩토링이 안전해지지만, 초기 개발 속도가 느려질 수 있어요. 요구사항이 자주 바뀌는 초기 단계보다는 안정된 기능을 구현할 때 더 효과적이에요.

프론트엔드 테스트는 처음에는 번거로워 보이지만, 한번 익숙해지면 개발 효율성을 크게 높여주는 도구예요. 실제 프로젝트에서 테스트 코드를 작성해본 경험과 그를 통해 발견한 버그나 개선 사항들을 구체적으로 이야기할 수 있다면 면접에서 좋은 평가를 받을 수 있을 거예요.