Jak czekać na zakończenie renderowania komponentu React w Mocha za pomocą enzymu?

Question

Mam komponent Parent, który renderuje komponent Child. Komponent Child najpierw renderuje unikalne rekwizyty, takie jak "nazwa", a następnie komponent Macierzysty renderuje wspólne rekwizyty, takie jak "typ", i wstrzykuje te rekwizyty do składnika Child, używając React.Children.map.

Mój problem polega na tym, że Enzym nie jest w stanie wykryć typowych rekwizytów renderowanych przez komponent Section, więc nie mogę skutecznie sprawdzić, czy dodawane są wspólne rekwizyty.

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

Kod do wtryskiwania wspólne rekwizyty:

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

Answer 1

Będziesz musiał użyć enzymu mount.

daje pełne renderowanie DOM, gdy trzeba czekać na komponenty do renderowania dzieci, a nie tylko renderowania pojedynczego węzła, takiego jak shallow.

Answer 2

Możesz użyć stopera, aby ustawić wydarzenie, które będzie wywoływać wydarzenie, które będzie za innymi. Musisz wywołać wykonane ręcznie przy użyciu tej metody.

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

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

React: Wait for full render in snapshot testing