高階組件將包裝元素呈現爲'標記'字符串

學習反應我正在嘗試編寫更高階的組件以在項目上添加刪除按鈕。我想不出我在做什麼錯在這裏：高階組件將包裝元素呈現爲'標記'字符串

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不是呈現'包裹元素'，而是將標籤作爲一個字符串。我錯過了什麼？

來源

2016-10-16 tmt

所以當我在瀏覽器中測試時遇到了另一個錯誤。所以看起來問題在於淺顯呈現不起作用，但在瀏覽器中渲染時一切正常。然後我不再測試裝飾的組件，但在這種情況下，只有HOC添加了一個刪除按鈕。

How to test decorated React component with shallow rendering

來源

2016-10-17 11:52:40 tmt

高階組件將包裝元素呈現爲'標記'字符串

回答

相關問題