How to wait for the full rendering of the React component in Mocha using Enzyme?

Question

I have a Parent component that displays a Child component. The Child component first displays the unique details of the name type, and then the Parent component displays the general details of the type, and enters those details into the Child component using React.Children.map .

My problem is that Enzyme cannot detect the general attribute displayed by the Section component, so I cannot effectively check if the general attribute is being added.

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

Code for the injection of general details:

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

Answer 1

You will need to use the mount enzyme.

mount gives you full DOM rendering when you need to wait for components to display children, not just one node, like shallow .

Answer 2

You can use a timer to set an event that draws an event that comes after others. You must do this manually using this method.

 describe('<MyComponent />', () => { it('My test.', (done) => { const wrapper = mount(<MyComponent />); setTimeout(() => { expect(wrapper).toMatchSnapshot(); done(); }, 1); }); }); 

React: Wait for full rendering in the snapshot.