React 테스팅: Enzyme을 사용하여 프롭 변경 및 컴포넌트 재렌더링 검증하기
React 컴포넌트를 다룰 때, 프롭 변경이 올바르게 적용되고 컴포넌트가 올바르게 재렌더링되는지 확인하는 것이 중요합니다. 이 블로그 포스트에서는 React용 인기 있는 테스팅 유틸리티인 Enzyme을 사용하여 프롭 변경을 검증하고 컴포넌트 재렌더링을 확인하는 방법을 살펴보겠습니다.
이슈 이해하기
Foo라는 React 컴포넌트가 있고 name이라는 프롭을 가지고 있다고 상상해 봅시다. 이 컴포넌트는 name 프롭에서 유도된 클래스와 값 속성을 갖는 입력 요소를 렌더링합니다.
다음은 예시 코드 스니펫입니다:
class Foo extends React.Component {
render() {
return (
<input className={this.props.name} type="text" value={this.props.name} onChange={()=>{}} />
);
}
}
name 프롭이 변경될 때 컴포넌트의 동작을 테스트하려고 할 때 이슈가 발생합니다. 컴포넌트의 상태가 올바르게 업데이트되어 입력 요소의 값 속성에 해당 변경 사항이 반영되는지 확인하려고 합니다.
해결책
이 이슈를 해결하는 핵심은 새로운 프롭을 설정한 후 컴포넌트를 강제로 업데이트하는 것입니다. 이를 위해 Enzyme 래퍼에 있는 update() 메소드를 호출할 수 있습니다.
다음은 Enzyme의 mount 함수를 사용한 업데이트된 테스트 케이스입니다:
it('should pass and does not', () => {
const wrapper = mount(<Foo name="foo" />);
expect(wrapper.find('.foo').html()).toBe('<input class="foo" type="text" value="foo">');
wrapper.setProps({ name: 'bar' });
wrapper.update(); // 컴포넌트 강제 업데이트
expect(wrapper.find('.bar').html()).toBe('<input class="bar" type="text" value="bar">');
});
Enzyme 래퍼에서 update()를 호출함으로써 컴포넌트가 새로운 프롭 값으로 다시 렌더링되도록 보장합니다. 이를 통해 입력 요소의 값 속성에 대한 정확한 변경 사항을 확인할 수 있습니다.
반드시 update()를 호출하지 않으면 setProps()를 사용할 때 컴포넌트의 렌더 메소드가 자동으로 트리거되지 않으므로 테스트는 실패합니다.
결론
이 블로그 포스트에서는 React에서 Enzyme을 사용하여 프롭 변경을 확인하고 컴포넌트 재랜더링을 검증하는 방법을 살펴보았습니다. Enzyme 래퍼에서 update() 메소드를 호출하여 컴포넌트를 업데이트함으로써 새로운 프롭으로 컴포넌트가 다시 렌더링되어 예상한 변경 사항을 확인할 수 있습니다.
프롭 변경이 컴포넌트의 상태와 렌더링에 올바르게 반영되는지 확인하는 것은 신뢰성이 있고 포괄적인 테스팅에 필수적입니다. Enzyme의 update() 메소드를 사용하면 프롭 변경과 관련하여 React 컴포넌트를 자신 있게 테스트하고 일관된 동작을 보장할 수 있습니다.
이러한 기술을 테스트 작업 흐름에 통합함으로써 React 애플리케이션의 신뢰성과 품질을 강화할 수 있습니다.
