如何使用酶监视反应事件侦听器？

Question

It seems to be a fairly simple task, but I can't figure out what I'm doing wrong...

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

I'm getting...

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

Answer 1

I figured out what is wrong here. Please, let me know if you have a better solution.

1) I should spy my function before I create my wrapper

2) I cannot use arrow functions as methods in my class

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

Answer 2

使用Simon库和方法存根