React의 Jest 유닛 테스트에서 얕은 렌더링이란 무엇입니까? 이 비디오에서

Question

(2 분) 다음 1시 40분 마크 주위에서

https://egghead.io/lessons/react-testing-intro-to-shallow-rendering

, 해설자는 당신이 볼 수 있도록로서,이 객체가 우리의 렌더링 된 출력의 깊은 하나의 레벨이며, "말한다 구성 요소가 렌더링 된 환경이 아니라 구성 요소에 대해서만 신경 써야하기 때문에 단위 테스트를 훨씬 쉽게 작성할 수 있습니다. "

그는 "한 단계 깊은"이란 무엇을 의미합니까? CoolComponent 예제의 컨텍스트에서 2 레벨의 렌더링 된 출력은 어떻게 생겼을까요?

Answer 1

얕은 렌더링을 사용하는 경우 Jest는 하위 구성 요소를 렌더링하지 않고 정의 된대로 반환합니다. 즉 "한 단계 딥 렌더링"입니다.

예 :

const Icon = (props) => { 
    const className = 'glyphicon glyphicon-' + props.type; 
    return (
     <span className={className} ariaHidden={true}></span> 
    ) 
}; 

const ButtonWithIcon = (props) => (
    <a className="btn btn-default"> 
     <Icon type={props.icon} /> 
     {props.label} 
    </a> 
); 

• 기본 렌더러로 <ButtonWithIcon icon="plus" label="Add Item" />을 테스트 할 때, 그것은 "확장"는 <ButtonWithIcon /> 내부에 포함 된 <Icon />됩니다

  <a class="btn btn-default"> 
      <span class="glyphicon glyphicon-plus"></span> 
      Add Thing 
  </a> 
  

• 으로 <ButtonWithIcon icon="plus" label="Add Item" />을 테스트 할 때 얕은 렌더러 인 경우 을안에 포함하지 않습니다. 717,:

  <a class="btn btn-default"> 
      <Icon type="plus" /> 
      Add Thing 
  </a> 
  

얕은 렌더링의 장점은 여기에있다 다음 <Icon /> 구성 요소의 HTML 이제까지 그것이 <Icon type="plus" /> 아이 컴퍼넌트를 기대로, 부모 <ButtonWithIcon /> 구성 요소에 대한 테스트가 여전히 잘 실행됩니다 변경해야합니다, <span class="glyphicon glyphicon-plus"></span> HTML이 아닙니다.