Компонент более высокого порядка отображает обернутый элемент как строку «тега»

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