해결된 질문
작성
·
209
1
const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.');
expect(textField).toHaveClass('my-class');
이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다.
물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!
답변 1
0
안녕하세요 이종민님~!
컴포넌트의 prop
이나 state
값을 검증하지 않는다는 의미에 대해 문의주셨는대요.
프런트엔드 앱에서 사용자가 직접 보고 상호 작용을 하는 영역은 렌더링된 DOM 결과입니다. 이 DOM 구조는 내부적으로 리액트 컴포넌트를 통해 렌더링되며, 이때 state
나 prop
이 사용되는대요.
여기서 state
나 prop
은 리액트 컴포넌트 내부 메커니즘에 의해서만 사용되며, 이 값 자체가 외부로 노출되는 것이 아니라 상황에 맞게 DOM 결과를 변경하는데 사용됩니다.
이러한 맥락에서 컴포넌트의 className
이란 prop
을 직접 검증한다기보다는 className
이란 prop이 텍스트 필드 DOM의 css class
에 올바르게 적용되었는지 검증한다고 이해하시면 되는대요.
예제의 경우 별도의 조건없이 className
을 prop
을 바로 적용한 결과를 검증하다보니 의미가 조금 헷갈리실 수 있는대요.
만약 아래처럼 조금 복잡한 형태의 className 적용 로직이 있다면 inputClassName
, hasError
와 같은 prop
값 자체를 테스트에 사용하는 것이 아니라 이 값들의 상태에 따라 렌더링된 DOM의 css class
가 올바르게 변경되었는지 검증해야 합니다.
<input type="text"
classeName={
// 조건에 따른 className 병합
cn(inputClassName, { '!border-ORANGE pr-40': hasError })
}
/>
즉, 컴포넌트의 단위, 통합 테스트는 항상 DOM 결과물을 기준으로 검증하는 것이 올바른 테스트라는 의미를 전달하려는게 목적이었구요. 예제에서 사용하는 react-testing-library 역시 이러한 철학을 그대로 계승하는 라이브러리입니다. (테스트하는 과정에서 컴포넌트의 state
나 prop
에 직접 접근하는 것도 어려우며, 권장되는 방법이 아닙니다 🙂)
결과적으로 testing-library의 조회 쿼리를 통해 리액트 컴포넌트가 원하는 DOM 결과로 렌더링되었는지 검증하는 것이 컴포넌트의 단위, 통합 테스트의 가장 중요한 포인트라 할 수 있습니다. 그리고 이러한 방식의 테스트는 사용자가 보고 상호 작용하는 DOM 구조 기반이기 때문에 실제 상황과 유사한 신뢰성 있는 테스트라고 할 수 있습니다.
혹시 더 궁금하거나 이해가 되지 않는 부분이 있다면 편하게 말씀해주세요! 감사합니다~ :)
안녕하세요~
개인적으로 추천드리는 책은 다음과 같은데요. 특정 책들은 자바스크립트가 아닌 다른 언어로 작성되어 있기도 하고, 책의 일부만 테스트와 관련이 있는 경우도 있는데요. 그럼에도 읽어보신다면 큰 도움이 되실 것이라 생각합니다.
단위 테스트 생산성과 품질을 위한 단위 테스트 원칙과 패턴
테스트 주도 개발
리팩터링 2판
구글 엔지니어는 이렇게 일한다 구글러가 전하는 문화, 프로세스, 도구의 모든 것
감사합니다!
감사합니다~! 혹시 테스트에 대해 추가적인 학습을 병행하려고 하는데, 추천해주실만한 책이 있을까요?