인프런 커뮤니티 질문&답변

이종민님의 프로필 이미지
이종민

작성한 질문수

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

2.1. 단위 테스트란 무엇일까?

prop이나 state 값을 검증하지 않는다는 의미가 궁금합니다!

해결된 질문

작성

·

209

1

const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.');
  expect(textField).toHaveClass('my-class');

이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다.

 

물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!

답변 1

0

코드 조커, 오프님의 프로필 이미지
코드 조커, 오프
지식공유자

안녕하세요 이종민님~!

컴포넌트의 prop이나 state값을 검증하지 않는다는 의미에 대해 문의주셨는대요.

프런트엔드 앱에서 사용자가 직접 보고 상호 작용을 하는 영역은 렌더링된 DOM 결과입니다. 이 DOM 구조는 내부적으로 리액트 컴포넌트를 통해 렌더링되며, 이때 stateprop이 사용되는대요.

여기서 stateprop은 리액트 컴포넌트 내부 메커니즘에 의해서만 사용되며, 이 값 자체가 외부로 노출되는 것이 아니라 상황에 맞게 DOM 결과를 변경하는데 사용됩니다.

이러한 맥락에서 컴포넌트의 className이란 prop을 직접 검증한다기보다는 className이란 prop이 텍스트 필드 DOM의 css class에 올바르게 적용되었는지 검증한다고 이해하시면 되는대요.

예제의 경우 별도의 조건없이 classNameprop을 바로 적용한 결과를 검증하다보니 의미가 조금 헷갈리실 수 있는대요.

만약 아래처럼 조금 복잡한 형태의 className 적용 로직이 있다면 inputClassName, hasError와 같은 prop값 자체를 테스트에 사용하는 것이 아니라 이 값들의 상태에 따라 렌더링된 DOM의 css class가 올바르게 변경되었는지 검증해야 합니다.

<input type="text"
   classeName={
     // 조건에 따른 className 병합
     cn(inputClassName, { '!border-ORANGE pr-40': hasError })
   }
/>

즉, 컴포넌트의 단위, 통합 테스트는 항상 DOM 결과물을 기준으로 검증하는 것이 올바른 테스트라는 의미를 전달하려는게 목적이었구요. 예제에서 사용하는 react-testing-library 역시 이러한 철학을 그대로 계승하는 라이브러리입니다. (테스트하는 과정에서 컴포넌트의 stateprop에 직접 접근하는 것도 어려우며, 권장되는 방법이 아닙니다 🙂)

결과적으로 testing-library의 조회 쿼리를 통해 리액트 컴포넌트가 원하는 DOM 결과로 렌더링되었는지 검증하는 것이 컴포넌트의 단위, 통합 테스트의 가장 중요한 포인트라 할 수 있습니다. 그리고 이러한 방식의 테스트는 사용자가 보고 상호 작용하는 DOM 구조 기반이기 때문에 실제 상황과 유사한 신뢰성 있는 테스트라고 할 수 있습니다.

혹시 더 궁금하거나 이해가 되지 않는 부분이 있다면 편하게 말씀해주세요! 감사합니다~ :)

 

이종민님의 프로필 이미지
이종민
질문자

감사합니다~! 혹시 테스트에 대해 추가적인 학습을 병행하려고 하는데, 추천해주실만한 책이 있을까요?

코드 조커, 오프님의 프로필 이미지
코드 조커, 오프
지식공유자

안녕하세요~

개인적으로 추천드리는 책은 다음과 같은데요. 특정 책들은 자바스크립트가 아닌 다른 언어로 작성되어 있기도 하고, 책의 일부만 테스트와 관련이 있는 경우도 있는데요. 그럼에도 읽어보신다면 큰 도움이 되실 것이라 생각합니다.

감사합니다!

이종민님의 프로필 이미지
이종민
질문자

정말 감사합니다~!

이종민님의 프로필 이미지
이종민

작성한 질문수

질문하기