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

My problem is that Enzyme is not able to detect the mon props rendered by the Section ponent so I cannot effectively test whether or not the mon 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("monPropOne")
      expect(wrapper.find(Child)).to.have.prop("monPropTwo")
      expect(wrapper.find(Child)).to.have.prop("monPropThree")

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

My problem is that Enzyme is not able to detect the mon props rendered by the Section ponent so I cannot effectively test whether or not the mon 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("monPropOne")
      expect(wrapper.find(Child)).to.have.prop("monPropTwo")
      expect(wrapper.find(Child)).to.have.prop("monPropThree")

The code for injecting mon props:

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

• javascript
• reactjs
• mocha.js
• enzyme
• chai

1 Answer 1

You will have to use enzyme's mount.

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