Как шпионить за функцией стрелки свойства класса, используя Jest - PullRequest
Новая
       42

Как шпионить за функцией стрелки свойства класса, используя Jest

0 голосов
/ 22 сентября 2018

Как я могу следить за функцией стрелки свойства класса, используя Jest?У меня есть следующий пример теста, который завершается неудачно с ошибкой 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();
  });
});

. Я могу выполнить тестовый проход, изменив onClick prop кнопки на () => this.onButtonClick(), но предпочел бы не менятьреализация компонента только ради тестов.

Есть ли способ выполнить этот тест без изменения реализации компонента?

1 Ответ

0 голосов
/ 22 сентября 2018

Согласно этой проблеме ферментов и этой , у вас есть два варианта:

Вариант 1: Позвонить wrapper.update() после spyOn

В вашем случае это будет: 

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();
  });
});

Вариант 2: Не использовать свойство класса

Итак, вам придется изменить свой компонент на: 

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

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

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

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