효소 : Stateless Functional Component가 정의되지 않은 소품을 반환합니다.

Question

Enzyme 얕은 렌더링을 사용하여 테스트중인 SFC가 있습니다. 이 상태없는 구성 요소에 인라인 스타일이 포함 된 스타일 객체를 전달합니다. 그러나 단위 테스트를 적용하면 정의되지 않은 값이 반환됩니다. 이 구성 요소가 소품으로 전달 된 내용을 반환하고 아무것도 전달/렌더링되지 않아 내게 정의되지 않은 것을 알았으므로 괜찮은지 확실하지 않습니다. 이 문제를 해결할 수있는 방법이 있습니까?

const LoginForm = ({ style, handleSubmit }) => { 
    return (
    <form onSubmit={handleSubmit}> 
     <div style={_.get(style, 'container')}> 
     {inputFields} 
     </div> 
    </form> 
); 
}; 

테스트 :

it('should apply styles to first div',() => { 
     const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>); 
     expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'}); 
     }); 

Answer 1

이 실패하는 이유에 대한 몇 가지 이유가있다.

처음에는 Enzyme 얕은 래퍼 API를 잘못 사용하고있는 것으로 보입니다.

얕은 래퍼에서 특정 소품을 얻으려면 .props() (즉, 's'을 잊어 버렸습니다)을 사용해야합니다.

wrapper.find('div').first().props('style') 

그러나, 테스트에, 당신은 style 소품으로 {display: 'inline'}을 통과하고 있기 때문에 심지어이 수정과 함께, 테스트는 여전히 실패 할 것이다, 그러나 당신은 당신의 구현 container라는 속성에 대해 찾고 있습니다. lodash.get을 사용하고있는 것으로 가정합니다.이 메시지는 gets the value at the path of an object입니다. 당신은뿐만 아니라 단위 테스트 코드를 게시 할 수 {display: 'inline'}