9

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

4

1 に答える 1