Enzyme를 사용하여 원하는 요소의 첫 번째 인스턴스 찾고 선택하는 방법
React로 작업하고 컴포넌트를 테스트해야 할 때 Enzyme를 접하셨을 것입니다. Enzyme는 React 컴포넌트와 상호 작용하고 테스트하기 쉽게 만들어주는 인기있는 JavaScript 테스트 유틸리티입니다.
가장 흔한 작업 중 하나는 컴포넌트 내에서 원하는 요소의 첫 번째 인스턴스를 찾고 선택하는 것입니다. 이 튜토리얼에서는 Enzyme를 사용하는 방법을 알아보겠습니다.
React 컴포넌트 작성
먼저 세 개의 박스가 있는 간단한 React 컴포넌트를 작성해보겠습니다:
const Boxes = (props) => {
return (
<div className="container">
<div onClick={props.showMessage} className="box">One</div>
<div onClick={props.showMessage} className="box">Two</div>
<div onClick={props.showMessage} className="box">Three</div>
</div>
);
}
`Boxes` 컴포넌트는 세 개의 박스를 렌더링하며 각 박스에는 클릭 이벤트 핸들러가 있습니다. 박스 중 하나를 클릭하면 `showMessage` 함수가 트리거됩니다.
Jest와 Enzyme를 사용한 테스트 작성
이제 Jest와 Enzyme를 사용하여 첫 번째 박스를 클릭하고 예상되는 메시지가 표시되는지 확인하는 테스트를 작성해보겠습니다.
it("Box One이 선택되면 메시지가 표시됩니다", () => {
// 컴포넌트 렌더링
let wrapper = shallow(
<Boxes
{...props}
/>
);
// 첫 번째 박스 클릭 시뮬레이션
wrapper.find('.box').at(0).simulate('click');
// 예상되는 메시지가 표시되는지 확인
expect(wrapper.contains('Box One Clicked')).toEqual(true);
});
테스트를 실행할 때 “Method ‘simulate’은 단일 노드에서만 실행할 수 있습니다. 대신 3개를 찾았습니다.”와 같은 오류 메시지가 표시될 수 있습니다. 이는 class 이름이 `box`인 여러 요소가 있는 경우 발생합니다.
요소의 첫 번째 인스턴스 선택하기
요소의 첫 번째 인스턴스를 선택하기 위해 테스트 코드를 다음과 같이 수정할 수 있습니다:
wrapper.find('.box').at(0).simulate('click');
이제 테스트를 다시 실행하면 올바르게 작동하고 예상되는 메시지가 표시될 것입니다.
요약
이 튜토리얼에서는 Enzyme를 사용하여 React 컴포넌트 내에서 원하는 요소의 첫 번째 인스턴스를 찾고 선택하는 방법을 다루었습니다. 동일한 클래스 이름을 가진 여러 요소가 있는 경우 어떤 요소를 선택할 지 지정해야 한다는 것을 배웠습니다.
`at(0)` 메소드를 사용하여 요소의 첫 번째 인스턴스를 선택하고 원하는 작업을 수행할 수 있습니다. 이 기술은 여러 유사한 요소가 있는 컴포넌트를 테스트할 때 유용합니다.
Enzyme는 React 컴포넌트를 테스트하기 위한 강력한 도구 세트를 제공하여 응용 프로그램의 포괄적이고 신뢰할 수 있는 테스트 작성을 쉽게 만들어줍니다.
React 컴포넌트의 신뢰성을 보장하기 위해 이러한 모범 사례를 테스트 워크플로에 통합하는 것을 잊지 마세요.
즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/46467375/enzyme-find-and-select-first-instance-of-element
같은 카테고리의 다른 글 보기 :
