Jest & Enzyme으로 항원 구성 요소를 테스트 할 때 : 구성 요소가 주어진 지 여부를 테스트 할 곳

Question

Jest & 효소을 사용하여 반응성 구성 요소에 대한 테스트를 작성하면 구성 요소에 특정 소품이 있는지 확인해야합니다. 우리가 확인 MyNestedComp를 만들기 위해 테스트해야 위의 예에서

<App> 
    <Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 
</App> 

는 someProps 소품이 부여됩니다. 현재, 필자는 각 구성 요소를 테스트하고 때로는 그러한 세부 사항을 테스트 할 곳을 혼동합니다.

Answer 1

전달 된 소품이 구성 요소 자체에서 사용 가능한지 여부와 상관없이 소품을 전달하는 구성 요소 자체의 테스트를 먼저 시작해야합니다. 그렇지 않으면 해당 html이 올바르게 렌더링됩니다.

효소의 얕은 렌더링을 사용하여 테스트중인 특정 구성 요소로 자신을 제한 할 수 있습니다.

예컨대 내가someProps 일부 HTML 요소에 표시 할 소품을 통과 사용하고

한다고 가정 MyNestedComp에. 그런 다음 당신은뿐만 아니라 부모 구성 요소에 대한 테스트 케이스를 작성할 수

const wrapper = shallow(<MyNestedComp someProps={"someValue"} />); 
expect(wrapper.html()).to.equal('<div><h1>someValue</h1></div>'); 

귀하의 예제에있는 Somewhere - MyNestedComp에 대한

const MyNestedComp = ({someProps}) => { 
return (
     <div> 
      <h1>{someProps}</h1> 
     </div> 
) 
} 

단위 테스트는 다음과 같이 쓸 수 있습니다. 부모 구성 요소에서 하위 구성 요소로 전달 된 불량이 올바르게 구성되었는지 여부를 확인할 수 있으며 많은 다른 테스트 사례가 가능합니다. 내가 당신을 도움이되기를 바랍니다

const wrapper = shallow(  
     <Somewhere> 
     <MyNestedComp someProps={someValue} /> 
     </Somewhere> 
); 

const childWrapper = wrapper.find('MyNestedComp'); 
expect(childWrapper).to.have.length(1); 
expect(wrapper.find({someProps: 'someValue'})).to.have.length(1); 

expect(wrapper.prop('someProps')).to.equal("someValue"); 

-로 어딘가에에 대한

<Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 

단위 테스트 케이스를 작성할 수 있습니다.