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");
});
3 réponses
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();
});
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");
});
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.