如何使用酶等待在Mocha中完成React組件的渲染？

Question

我有一個呈現Child組件的Parent組件。 Child組件首先呈現諸如'name'之類的獨特道具，然后Parent組件呈現諸如'type'之類的常見道具，然后使用React.Children.map將這些道具注入Child組件。

我的問題是，酶無法檢測到由Section組件渲染的通用道具，因此我無法有效地測試是否添加了通用道具。

考試：

  const wrapper = shallow( <Parent title="Test Parent"> <div> <Child name="FirstChild" /> </div> </Parent> ) // console.log(wrapper.find(Child).node.props) <- returns only "name" in the object expect(wrapper.find(Child)).to.have.prop("commonPropOne") expect(wrapper.find(Child)).to.have.prop("commonPropTwo") expect(wrapper.find(Child)).to.have.prop("commonPropThree") 

注入常​​用道具的代碼：

 const Parent = (props) => ( <div className="group" title={props.title} > { React.Children.map(props.children, child => applyCommonProps(props, child)) } </div> ) 

Answer 1

您將不得不使用酶的支架 。

當您需要等待組件來渲染子級時， mount為您提供完整的DOM渲染，而不是像shallow那樣僅渲染單個節點。