Come attendere il rendering completo del componente React in Mocha usando Enzyme?

Question

Ho un componente Parent che esegue il rendering di un componente Child. Il componente Child esegue il rendering di oggetti di scena unici come "nome", quindi il componente padre esegue il rendering di oggetti di scena comuni come "tipo" e li inserisce nel componente Child utilizzando React.Children.map.

Il mio problema è che Enzyme non è in grado di rilevare gli oggetti di scena comuni resi dal componente Section, quindi non posso testare efficacemente se gli oggetti di scena comuni vengano aggiunti o meno.

La prova:

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

Il codice per l'iniezione di oggetti di scena comuni:

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

Answer 1

si dovrà utilizzare l'enzima di mount.

mount fornisce il rendering DOM completo quando è necessario attendere che i componenti eseguano il rendering dei bambini anziché solo il rendering di un singolo nodo come shallow.

Answer 2

È possibile utilizzare il timer per impostare un evento che visualizzerà un evento che sarà dopo gli altri. Devi invocare fatto manualmente usando questo metodo.

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

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

React: Wait for full render in snapshot testing