web-dev-qa-db-fra.com

Comment espionner une fonction de flèche de propriété de classe à l'aide de Jest

Comment puis-je espionner une fonction de flèche de propriété de classe en utilisant Jest? J'ai l'exemple de scénario de test suivant qui échoue avec l'erreur Expected mock function to have been called.:

import React, {Component} from "react";
import {shallow} from "enzyme";

class App extends Component {
  onButtonClick = () => {
    // Button click logic.
  };

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

describe("when button is clicked", () => {
  it("should call onButtonClick", () => {
    const app = shallow(<App />);
    const onButtonClickSpy = jest.spyOn(app.instance(), "onButtonClick");

    const button = app.find("button");
    button.simulate("click");
    expect(onButtonClickSpy).toHaveBeenCalled();
  });
});

Je peux réussir le test en remplaçant le onClick prop du bouton par () => this.onButtonClick() mais je préférerais ne pas changer l'implémentation de mes composants juste pour le plaisir des tests.

Existe-t-il un moyen de réussir ce test sans modifier l'implémentation des composants?

reactjsjestjsenzymespy
10
DanielGibbs

Selon ce problème d'enzyme et celui-ci , vous avez deux options:

Option 1: appelez wrapper.update() après spyOn

Dans votre cas, ce serait:

describe("when button is clicked", () => {
  it("should call onButtonClick", () => {
    const app = shallow(<App />);
    const onButtonClickSpy = jest.spyOn(app.instance(), "onButtonClick");

    # This should do the trick
    app.update();
    app.instance().forceUpdate();

    const button = app.find("button");
    button.simulate("click");
    expect(onButtonClickSpy).toHaveBeenCalled();
  });
});

Option 2: n'utilisez pas la propriété de classe

Donc, pour vous, vous devrez changer votre composant pour:

class App extends Component {
  constructor(props) {
    super(props);

    this.onButtonClick = this.onButtonClick.bind(this);
 }

  onButtonClick() {
    // Button click logic.
  };

  render() {
    return <button onClick={this.onButtonClick} />;
  }
}
15
Léopold Houdin