Как шпионить за слушателем события реакции, используя фермент?

Question

Это кажется довольно простой задачей, но я не могу понять, что я делаю неправильно ...

Page.jsx

class Page extends React.Component {
  constructor(props) {
    super(props);
  }

  handlePageClick = (e) => {
    console.log('page click!!');
  }

  render() {
    return(
      <div className='at-page' onClick={this.handlePageClick}>
        {this.props.children}
      </div>
    );
  }
}

export default Page;

Page.test.js

...
it('page should listen for click events', () => {
  const wrapper = mount(<Page><div>Hello Page</div></Page>);
  const instance = wrapper.instance();
  const spy = jest.spyOn(instance, 'handlePageClick');

  const page = wrapper.find('.at-page');
  page.prop('onClick')();

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

Я получаю ...

expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called.

Answer 1

Используйте библиотеку Simon и заглушку метода

Answer 2

Я понял, что здесь не так.Пожалуйста, дайте мне знать, если у вас есть лучшее решение.

1) Я должен шпионить за своей функцией, прежде чем создавать свою оболочку

2) Я не могу использовать функции стрелок в качестве методов в моем классе

Page.jsx

class Page extends React.Component {
  constructor(props) {
    super(props);

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

  handlePageClick(e) {
    console.log('page click!!');
  }

  render() {
    return(
      <div className='at-page' onClick={this.handlePageClick}>
        {this.props.children}
      </div>
    );
  }
}

export default Page;

Page.test.js

...
it('page should listen for click events', () => {
  const spy = jest.spyOn(Page.prototype, 'handlePageClick');
  const wrapper = mount(<Page><div>Hello Page</div></Page>);
  const page = wrapper.find('.at-page');

  page.prop('onClick')();

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