enzyme simuler 'click' ne fonctionne pas quand il le faut

Question

J'utilise Jest and Enzyme pour tester un composant Form, et j'ai du mal à faire fonctionner la simulation de clic. Pour référence: Button est un bouton de rebass style et existe sous la forme comme ceci:

<Button 
    type="reset" 
    disabled={pristine || submitting} 
    onClick={() => onClose(dirty)} 
> 

est ici le test qui est défaillant:

it('should handle the onClose event',() => { 
     const onCloseSpy = jest.fn(); 
     const renderedComponent = mount(renderFormUtil({ onClose: onCloseSpy })); 
     expect(onCloseSpy).not.toHaveBeenCalled(); 
     console.log(renderedComponent.find(Form).props().onClose); 
     renderedComponent 
     .find(Button) 
     .first() 
     .simulate('click'); 
    expect(onCloseSpy).toHaveBeenCalled(); 
    }); 

Que faut-il noter ici, est que si je remplace la simuler la ligne avec ce qui suit:

renderedComponent 
    .find(Button) 
    .first() 
    .props() 
    .onClick(); 

puis soudainement mon test passe. Comment est-ce possible? Si le prop onClick est correct, cela ne signifie-t-il pas que l'événement click n'appelle pas le prop correctement?

Answer 1

Il n'est pas clair si les deux .find sélectionnent les mêmes composants car chacun utilise un sélecteur différent. Combiné avec cela, vous utilisez .first() dont il n'est pas possible d'être sûr de la commande avec l'exemple de code.
Vous pouvez essayer d'utiliser un sélecteur plus spécifique, en évitant d'utiliser .first() et en obtenant le composant souhaité avec .find. Pour cela, vous pouvez ajouter un id pour une ButtonSubmit spécifique et utiliser un sélecteur comme:
.find('ButtonSubmit[id="foo"]')