高阶组件将包装元素呈现为'标记'字符串

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