Почему мой шпион Jest не показывается как вызванный, когда я вижу, что это так?

Question

Я пытаюсь определить, почему именно мой шпион Jest не вызывается, когда я вижу, что шпион правильно "введен" в мой компонент?Вот мой очень простой пример:

TestComponent.js

export default class TestComponent extends Component {
  constructor(props) {
    super(props);

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

  handleSubmit(event) {
    event && event.preventDefault();
    console.log("handleSubmit called!");
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button className="submit-button" type="submit">
          Submit
        </button>
      </form>
    );
  }
}

TestComponent.test.js

describe("TestComponent tests", () => {
  it("`handleSubmit` is called when form is submitted", () => {
    const wrapper = shallow(<TestComponent />);
    const spy = jest.spyOn(wrapper.instance(), "handleSubmit");

    wrapper.find("form").simulate("submit");

    expect(spy).toHaveBeenCalled();
  });
});

Если я сделаю console.log на wrapper.instance().handleSubmit, я смогу ясно увидеть, что шпион был введен в свойство объекта, но мой тест все равно не дает понять, что шпион не был вызван.

CodeSandbox сРабочий пример можно найти здесь: https://codesandbox.io/s/3ymkp3w5x1

Спасибо!

Answer 1

Рекомендуется не проверять, что был вызван handleSubmit, а просто проверять результаты вызова handleSubmit.Сказав, что ...

---

Выпуск

onSubmit напрямую связан со значением this.handleSubmit в момент визуализации компонента.

---

Solution

Используйте лямбда-функцию (обратите внимание, , это может вызвать проблемы с производительностью ), чтобы onSubmit вызывало текущее значение this.handleSubmit при его вызове:

<form onSubmit={() => this.handleSubmit()}>