Parent
コンポーネントをレンダリングするコンポーネントがありChild
ます。コンポーネントは最初に「名前」などの一意の小道具をレンダリングし、次に親コンポーネントChild
が「タイプ」などの共通の小道具をレンダリングし、.Child
React.Children.map
私の問題は、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>
)