Enzyme - 중첩 된 구성 요소가 올바르게 렌더링되었는지 테스트합니다.

Question

상태가 간단한 부울 값을 통해 업데이트 될 때 부모 구성 요소 내에서 해당 하위 구성 요소가 올바르게 렌더링되는지 테스트하려고합니다. 상위 구성 요소 아래 : 지금까지이 상태가 올바르게 변경되면 확인을 두 번

beforeEach(() => { 
     wrapper = mount(<Parent isReady={true}/>); 
    }); 

it('Should render Child component',() => { 
     expect(wrapper.prop('isReady')).to.equal(true); // Working !! 
     expect(wrapper.find(Child).length).to.equal(1); // Not Working -> equal 0 
    }); 

, 나는 isReady 상태의 래퍼의 상태를 확인할 때이 사실로 보인다

class Parent extends Component { 
    ... 
    render() { 
    const { ..., isReady } = this.state; 
    const props = { ... }; 

    return(
     <div className="container page-content"> 

     { isReady ? 
      <Child {...props} /> 
      : 
      <div id="loader-wrapper"> 
      <div id="loader"></div> 
      </div> 
     } 

     </div> 
    ); 
    } 
} 

내 테스트입니다. 나는이 부분이 잘 작동하고 있음을 확신한다.

또한 wrapper.html()을 시도하고 isReady가 true 인 경우에도 내 로더와 함께 div 부분 만 볼 수 있습니다. <form>..</form>이 될 하위 구성 요소는 렌더링되지 않습니다. 그래서 만약 내가 뭔가를 시도 : expect(wrapper.find('form').length).to.equal(1); 그것은 둘 다 작동하지 않습니다. 나는 이유를 모르겠다.

부모 동작을 테스트하고 내 자식 구성 요소가 올바르게 렌더링되는지 보려면 여기에서 모범 사례가되어야합니까?

업데이트 :

1/ 내가 console.log(wrapper)을 통해 봤는데, 나는 isReady 상태가 확실히 사실입니다 볼 수 있지만 렌더링 유일한 부분은 로더 사업부입니다. 중첩 된 구성 요소 Child는 렌더링되지 않습니다. 내가 왜 마운트를 사용하고 prop/state가 올바르게 설정되었는지 알지 못합니다. 내가 볼 수있는에서

2/은 내가 부모 구성 요소가 중첩 된 구성 요소가 포함되어있는 경우 테스트 다른 구성 요소에서 유사한 테스트를하고 있어요 때문에 문제가있는 { isReady ? ... }있어 이번에는 어떤 조건이없는 및 잘 작동합니다.

Answer 1

당신은 당신의 테스트 파일에있는 구성 요소를 가져 와서 오히려 문자열

import Child from 'path/to/child'; 
expect(wrapper.find(Child).length).to.equal(1); 

확인 this article on how to write the selectors보다 찾기 기능에 해당 인스턴스를 통과해야합니다 또한

것이다 여전히 수이 조건의 결과 부모의 마운트 된 인스턴스를 생성 할 때 이미 가 초기화되지 않은 경우 isReady 상태를 설정하지 않으므로 false가됩니다. 하나를 제거 (`(아이) 'wrapper.find : setState

wrapper.setState({ isReady: true });