logo

How to Test Intersection Observer

language-logoJest
language-logoReactJS
language-logoTesting Library

• Intersection Observer API는 타겟 엘리먼트가 화면에 보여지는지 확인하는 Web API 기능으로, 무한 스크롤 구현에 사용됩니다.
• 구현 코드에서는 componentDidMount, componentDidUpdate, componentWillUnmount 시점에 각각 데이터 조회, 신규 타겟 등록, IntersectionObserver 정리 등의 동작을 수행합니다.
• IntersectionObserver를 사용한 무한 스크롤 구현: React에서 IntersectionObserver를 이용해 무한 스크롤 기능을 구현하고, 포켓몬 데이터를 불러와 화면에 표시하는 예제 코드 작성
• 테스트 코드 작성: axios 모듈의 get 함수를 스터빙하여 호출 시 객체 리스트 반환하도록 설정, 화면 렌더링 후 스크롤 이벤트 발생시키고 결과 확인, 에러 발생 원인 분석 및 해결 방법 제시

thumbnail
북마크
공유하기
신고하기
7분 분량
조회수 263
profile-imageJunhyunny
2년 전
Copyright © 2025. Codenary All Rights Reserved.