我有一个父组件,呈现一个子组件. Child组件首先呈现像’name’这样的独特道具,然后Parent组件呈现常见的道具,例如’type’,并使用React.Children.map将这些道具注入到Child组件中.
我的问题是,Enzyme无法检测到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> )
你将不得不使用酶的
mount.
当您需要等待组件渲染子项而不是仅渲染像浅的单个节点时,mount会为您提供完整的DOM渲染.