admin管理员组

文章数量:1327661

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

Share Improve this question edited May 11, 2019 at 13:50 Zoe - Save the data dump 28.3k22 gold badges128 silver badges160 bronze badges asked May 20, 2016 at 17:03 cmwallcmwall 4672 gold badges6 silver badges15 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

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.

本文标签: javascriptHow to wait for complete render of React component in Mocha using EnzymeStack Overflow