Higher Order Component는 래핑 된 요소를 '태그'문자열로 렌더링합니다.

Question

학습 반응 항목에 삭제 버튼을 추가하기 위해 상위 구성 요소를 쓰려고합니다. 나는 내가 잘못 여기서 뭐하는 거지 알아낼 수 없습니다 : 나는 이런 식으로 테스트입니다

const deletableItem = WrappedComponent => { 
    const DeletableItemWrapper = class extends React.Component { 
    render() { 
     return (
     <div> 
      <WrappedComponent {...this.props} /> 
      <button onClick={this.props.onDelete}>delete</button> 
     </div> 
    ) 
    } 
    } 
    DeletableItemWrapper.propTypes = { 
    onDelete: PropTypes.func.isRequired 
    } 
    DeletableItemWrapper.displayName = 
    'DeletableItemWrapper_' +WrappedComponent.displayName 
    return DeletableItemWrapper 
} 

:

describe('deletableItem',() => { 
    it('should contains dumb',() => { 
    const onDelete = sinon.spy() 
    const DumbComponent =() => <div>dumb</div> 
    const Item = deletableItem(DumbComponent) 
    const wrapper = shallow(<Item onDelete={onDelete} />) 
    expect(wrapper.text()).to.contains('dumb') 
    }) 
}) 

시험은 저를 제공합니다

AssertionError: expected '<DumbComponent />delete' to include 'dumb' 

은 그래서 같이

HOC는 '줄 바꿈 요소'를 렌더링하지 않고 태그 만 문자열로 렌더링합니다. 내가 놓친 게 무엇입니까 ?

Answer 1

그래서 브라우저에서 테스트 할 때 다른 오류로 혼란스러워했습니다. 따라서 문제는 얕은 렌더링에서는 작동하지 않지만 브라우저에서 렌더링 할 때는 문제가없는 것 같습니다. 그렇다면 장식 된 구성 요소는 더 이상 테스트하지 않지만이 경우에는 HOC가 삭제 버튼을 추가한다는 사실 만 테스트합니다.

How to test decorated React component with shallow rendering