Wie warten Sie auf die vollständige Wiedergabe von React-Komponente in Mocha mit Enzym?

Question

Ich habe eine Parent Komponente, die eine Child Komponente rendert. Die Komponente Child rendert zuerst eindeutige Requisiten wie "Name", und dann gibt die Komponente "Eltern" gängige Requisiten wie "Typ" wieder und injiziert diese Requisiten unter Verwendung von React.Children.map in die Komponente Child.

Mein Problem ist, dass das Enzym nicht in der Lage ist, die von der Komponente Section gerenderten Requisiten zu erkennen, so dass ich nicht effektiv testen kann, ob die üblichen Requisiten hinzugefügt werden oder nicht.

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

Der Code zum Injizieren gemeinsame Requisiten:

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

Answer 1

Sie Enzym verwenden mount.

mount gibt Ihnen das vollständige DOM-Rendering, wenn Sie auf Komponenten warten müssen, um untergeordnete Elemente darzustellen, anstatt nur einen einzelnen Knoten wie shallow zu rendern.

Answer 2

Sie können den Timer verwenden, um ein Ereignis festzulegen, das ein Ereignis nach dem anderen auslöst. Sie müssen mit dieser Methode manuell fertig machen.

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

    setTimeout(() => { 
     expect(wrapper).toMatchSnapshot(); 
     done(); 
    }, 1); 
    }); 
}); 

React: Wait for full render in snapshot testing