Comment tester le composant ayant une transition css?

Question

Voici la méthode que j'utilise pour modifier l'état de l'encapsuleur.

const waitTransitionEnd = (element) => new Promise(resolve => { 
    const onEnd =() => { 
    element.removeEventListener('transitionend', onEnd) 
    resolve() 
    } 
    element.addEventListener('transitionend', onEnd) 
}) 
    doOpen() { 
     const dialog = findDOMNode(this.dialog) 
     this.setState({ status: OPENING }) 
     return waitTransitionEnd(dialog).then(() => { 
      this.setState({ status: OPENED }) 
      this.focus() 
     }) 
     } 
     doClose() { 
     const dialog = findDOMNode(this.dialog) 
     this.setState({ status: CLOSING }) 
     return waitTransitionEnd(dialog).then(() => { 
      this.setState({ status: CLOSED }) 
     }) 
     } 

La boîte de dialogue est donc appelée composant avec la transition css. J'essaye de tester le composant que j'obtiens le statut ouvrant seulement parce que l'état ouvert vient seulement après que la transition ait été accomplie. J'utilise le test d'instantané de jest. Quelqu'un a fait face à ce genre de problème lors de la rédaction des cas de test avec plaisanterie? S'il vous plaît aider.

Answer 1

Vous pouvez simuler l'événement transitionEnd comme n'importe quel autre événement React.

Si vous utilisez l'enzyme, il ressemblerait à quelque chose comme:

test('should do something after transition ends',() => { 
    const wrapper = shallow(<Component>Label text</Component>); 
    expect(wrapper).toHaveState('status', OPENED); 
    wrapper.simulate('transitionEnd'); 
    expect(wrapper).toHaveState('status', CLOSED); 
}); 

De plus, vous pouvez ajouter vos événements de transition à droite votre composant:

(as a functional component for brevity) 
const Component =() => 
    <div onTransitionEnd={this.handleTransitionEnd} onClick={this.startStatusTransition} />