如何使用 Jest 和 Enzyme 测试按钮的 onClick 属性

Question

我正在尝试测试一个在 React 中具有 onClick 函数的按钮。我的按钮看起来像这样：

<button 
          id='emailButton'
          className={classes.sceContactHeaderButton}
          data-toggle='collapse'
          data-target='#editEmailContact'
          onClick={props.handleToggle}
          tabIndex={0}
          title={(props.email.isOpen) ? 'Close Section' : 'Open Section'}
        >
          <span>{(props.email.isOpen) ? 'Close' : 'Details'}</span>
          <i className={(props.email.isOpen) ? 'fa fa-angle-up' : 'fa fa-angle-down'} />
        </button>

我对 onClick() 方法的测试是：

  it('check if the onClick method of the button exists', () => {
        wrapper.find('#emailButton').children().at(0).prop('onClick')();
    });

但我收到一条错误消息：

TypeError: wrapper.find(...).children(...).at(...).prop(...) is not a function

我究竟做错了什么？任何帮助是极大的赞赏。

Answer 1

我认为您想要的是模拟事件而不是将其称为道具。以下是有关如何执行此操作的示例：

 it('should call mock function when button is clicked', () => {
   const tree = shallow(
     <Button name='button test' handleClick={mockFn} />
   );
   tree.simulate('click');
   expect(mockFn).toHaveBeenCalled();
 });

我在这篇文章中找到了这个例子https://medium.com/backticks-tildes/testing-your-react-component-with-jest-and-enzyme-276eef45bea0