How to wait for complete render of React component in Mocha using Enzyme?

Question

I have a Parent component that renders a Child component. The Child component first renders unique props like 'name' and then the Parent component renders common props such as 'type' and injects those props into the Child component using React.Children.map.

My problem is that Enzyme is not able to detect the common props rendered by the Section component so I cannot effectively test whether or not the common props are being added.

The test:

      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")

The code for injecting common props:

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

Answer 1

You will have to use enzyme's mount.

mount gives you full DOM rendering when you need wait for components to render children rather than only rendering a single node like shallow.