web-dev-qa-db-fra.com

Testez si la fonction est appelée réagir et enzyme

J'essaie de tester l'une des méthodes de mon composant React. Il est appelé après un clic sur un bouton, j'ai donc la simulation en place avec l'enzyme

 it('clone should call handleCloneClick when clicked', () => {
        const cloneButton = wrapper.find('#clone-btn');
        cloneButton.simulate('click');
 });

Ma méthode des composants est ici:

_handleCloneClick(event) {
    event.preventDefault();
    event.stopPropagation();

    this.props.handleClone(this.props.user.id);
}

Le _handleCloneClick est appelé lorsque l'utilisateur clique sur le bouton qui est dans la simulation, comment puis-je procéder pour tester qu'il a été appelé avec succès?

reactjssinonenzyme
14
Jake

Il y a deux options, soit vous devez espionner _handleCloneClick Du prototype du composant, avant de rendre le composant:

export default class cloneButton extends Component {
  constructor(...args) {
    super(...args);
    this. _handleCloneClick = this. _handleCloneClick.bind(this);
  }

  _handleCloneClick() {
    event.preventDefault();
    event.stopPropagation();

    this.props.handleClone(this.props.user.id);
  }

  render() {
    return (<button onClick={this. _handleCloneClick}>Clone</button>);
  }
}

Et dans votre test:

it('clone should call handleCloneClick when clicked', () => {
  sinon.spy(cloneButton.prototype, '_handleCloneClick');
  const wrapper = mount(<cloneButton/>);
  wrapper.find('#clone-btn').simulate('click');
  expect(spy).toHaveBeenCalled() //adept assertion to the tool you use
});

Ou, vous pouvez essayer de définir un espion après avoir rendu le composant et invoquer wrapper.update() par la suite:

it('clone should call handleCloneClick when clicked', () => {      
  const wrapper = mount(<cloneButton/>);
  sinon.spy(wrapper.instance(), "_handleCloneClick");
  wrapper.update();
  wrapper.find('#clone-btn').simulate('click');
  expect(spy).toHaveBeenCalled() //adept assertion to the tool you use
});
5
Alexandr Lazarev