Javascript 如何使用酶监视react事件侦听器？

这似乎是一个相当简单的任务，但我不知道我做错了什么

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;

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;

类页扩展React.Component{
建造师（道具）{
超级（道具）；
}
HandlePage点击=（e）=>{
log（'page click！！'）；
}
render（）{
返回(
{this.props.children}
);
}
}
导出默认页面；

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

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

。。。
它（'页面应侦听单击事件'，（）=>{
const wrapper=mount（Hello页面）；
const instance=wrapper.instance（）；
const spy=jest.spyOn（实例“handlepage click”）；
const page=wrapper.find（'.at page'）；
page.prop（'onClick'）（）；
期望（间谍）。已被调用（）；
}
...

我要

expect（jest.fn（））.tohavebeencall（）

---

预期已调用模拟函数。

我发现这里出了什么问题。如果您有更好的解决方案，请告诉我

1） 我应该在创建包装器之前检查我的函数

2） 我不能在类中使用箭头函数作为方法

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;

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;

类页扩展React.Component{
建造师（道具）{
超级（道具）；
this.handlepage click=this.handlepage click.bind（this）；
}
HandlePage点击（e）{
log（'page click！！'）；
}
render（）{
返回(
{this.props.children}
);
}
}
导出默认页面；

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

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

。。。
它（'页面应侦听单击事件'，（）=>{
const spy=jest.spyOn（Page.prototype，'handlepage click'）；
const wrapper=mount（Hello页面）；
const page=wrapper.find（'.at page'）；
page.prop（'onClick'）（）；
期望（间谍）。已被调用（）；
}
...

在课堂上使用Simon库和方法存根

使用箭头函数应该是可以的。你为什么不使用Ezyme的

模拟

函数？