javascript - How to wait for complete render of React component in Mocha using Enzyme? - Stack Overflow

admin管理员组

文章数量:1331650

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

Share Improve this question Follow edited May 11, 2019 at 13:50 Zoe - Save the data dump 28.3k2222 gold badges128128 silver badges160160 bronze badges asked May 20, 2016 at 17:03 cmwallcmwall 46722 gold badges66 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: 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