如何使用Enzyme监听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;

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.

问题原因 #

你遇到的问题是因为类属性箭头函数的绑定时机和测试中的spy顺序不匹配：

• handlePageClick是类属性箭头函数，在组件实例创建（mount）的时候就已经绑定到实例上了，并且组件的onClick已经引用了这个初始的函数。
• 你在mount之后才用jest.spyOn去监听实例上的handlePageClick，此时spy替换的是实例上的方法，但组件的onClick仍然指向原来的那个函数引用。所以当你调用page.prop('onClick')()时，执行的是最初的函数，而不是被spy包裹后的版本，自然不会触发spy的调用记录。

解决方案 #

推荐使用更贴合真实用户行为的修复方式：

方法：使用simulate触发点击事件

直接通过Enzyme的simulate方法模拟用户点击，这样会真实触发组件的事件处理逻辑，调用实例上被spy监听的方法：

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.simulate('click'); 
  expect(spy).toHaveBeenCalled(); 
});

这个方法既符合真实的交互场景，也能完美解决spy未被触发的问题。

内容的提问来源于stack exchange，提问作者Pablo Darde