테스트에 포함 된 내를 들어 효소와 농담

Question

와 구성 요소 반응 나는 다음과 같은 한 구성 요소 반응 : 나는 collection.archived에 대해 다른 값에 전달하여 테스트를 시도하고있어

const ArchiveButton = ({collection, onClick}) => { 

    return (
     <span> 
      { collection.archived && 
      <Button bsStyle="link" onClick={onClick}><i className="fa fa-rotate-left" />&nbsp;Unarchive</Button> 
      } 
      { !collection.archived && 
      <Button bsStyle="link" onClick={onClick}><i className="fa fa-archive" />&nbsp;Archive</Button> 
      } 
     </span> 
    ); 
}; 

을하고 내가 확인하고 싶은 텍스트 "아카이브"대 "아카이브"의 존재.

const wrapper = shallow(<ArchiveButton onClick={onClick} {...props}/>); 

    let button = wrapper.find('Button').prop('children'); 
    expect(button[1]).toMatch(/\sUnarchive/); 

확실하지,하지만 조금 떨어져 보인다 : 나는 wrapper.find('Button')을 시도하고 .text()에 대해 확인할 때 나는 그것이 테스트하는 방법을 알아 냈어요 단지 <Button />하고있는 유일한 방법입니다. 감사!

Answer 1

얕은 렌더링을 사용하기 때문에 중첩 된 Button 구성 요소가 렌더링되지 않기 때문입니다. 위에서 보았 듯이 중첩 된 구성 요소 소품에 액세스하여 전달한 값을 테스트 할 수 있습니다. 단추 내용을 렌더링하려면 기본 렌더링을 대신 사용하십시오.

중첩 된 Button은 얕은 DOM 렌더링을 사용하더라도 렌더링되는 일반 DOM 요소가 아니라 구성 요소 자체입니다.

케이스에 얕은 렌더링을 사용하지 않으면 버튼 구성 요소에 대한 내용을 명시하고 있으므로 실제로 구성 요소를 단위 테스트하지 않습니다. 얕은 렌더링을 사용하고 중첩 된 구성 요소의 소품에 액세스하는 경우 실제로 코드에서 올바른 인수로 Button 구성 요소를 호출하는지 테스트하고 있으며 Button 구성 요소의 렌더링 방법을 전제로하지는 않습니다. 이것은 일반적으로 단위 테스트에서 수행하고자하는 작업입니다.