Pourriez-vous s'il vous plaît me dire comment vérifier que la fonction onclick est déclenchée ou ne réagit pas? J'ai un bouton dans ma démo INCREMENT en cliquant sur le bouton je veux vérifier si la fonction onClickHandler est appelée ou non

Voici mon code https://codesandbox.io/s/oq7kwzrnj5

it("check counter increment function is callled", () => {
    const wrapper = shallow(<Counter />);
    wrapper.find("button").simulate("click");
  });
1
user5711656 13 avril 2018 à 13:39

3 réponses

Meilleure réponse

Vous pouvez utiliser une bibliothèque comme Sinon pour espionner les fonctions de votre classe:

import sinon from 'sinon';
const sandbox = sinon.createSandbox();

Ensuite, lorsque vous configurez vos tests, avant d'effectuer un rendu superficiel de votre composant:

it("check counter increment function is callled", () => {
  const spy = sandbox.spy(Counter.prototype, 'onClickHandler');
  const wrapper = shallow(<Counter />);
  wrapper.find("button").simulate("click");
  expect(spy.called).toBe(true);
});

Mise à jour:

Le gestionnaire onClick ne doit pas être défini comme une fonction anonyme, utilisez plutôt:

onClickHandler() {
  const increamentCounter = this.state.counter + 1;
  this.setState({
    counter: increamentCounter
  });
}

Et dans votre fonction de rendu, liez ceci:

render() {
  return (
    <div>
      <p>{this.state.counter}</p>
      <button onClick{this.onClickHandler.bind(this)}>INCREMENT</button>
    </div>
  );
}

Mettre à jour à l'aide de Jest

En fait, vous n'avez même pas besoin d'une bibliothèque tierce comme sinon. Vous pouvez réaliser la même chose en utilisant Jest:

it("check counter increment function is callled", () => {
  const spy = jest.spyOn(Counter.prototype, "onClickHandler");
  const wrapper = shallow(<Counter />);
  wrapper.find("button").simulate("click");
  expect(spy).toBeCalled();
});
2
Martin Reiche 13 avril 2018 à 11:37

Ajoutez console.log() dans votre onClick:

it("check counter increment function is callled", () => {
    console.log('Im here')
    const wrapper = shallow(<Counter />);
    wrapper.find("button").simulate("click");
 });
0
LaPoule 13 avril 2018 à 11:01

J'ai ajouté le journal de la console à votre code et cela fonctionnait bien.

     onClickHandler = () => {
         console.log("Hello");
          const increamentCounter = this.state.counter + 1;
            this.setState({
            counter: increamentCounter
          });
       };

Donc, onClickHandler fonctionne bien. Pour l'échec du test, je pense que ce lien pourrait être utile.

-1
chindicoder 13 avril 2018 à 11:21