在 React 中，如何在父元素内的子元素中测试 click 事件

Question

我正在对 component 子元素进行单元测试，对于使用 Jest 的 React 应用程序，问题是我无法测试单击子元素时是否调用了函数。该函数使用jest.fn() 模拟。但我仍然收到此错误Expected mock function to have been called.。

组件：

import React, { Component } from 'react';

class Panel extends Component {

  static defaultProps = {
    title: 'No data',
    info: 'Please add some info!.'
  }

  handleRemove() {
    alert('Panel should be removed!');
  }

  handleShare(e) {
    e.preventDefault();
    alert('Panel info can shared on social media.');
  }

  render() {
    return (
      <div className="panel col-md-4 col-xs-6">
        <a href="#" className="panel-remove-btn" onClick={this.handleRemove}>Remove</a>
        <div>
          <h3 className="panel-title">{this.props.panel.title}</h3>
          <p className="panel-info">{this.props.panel.info}</p>
        </div>
        <div>
          <a className="panel-share-btn btn btn-primary" onClick={this.handleShare}>Share</a>
        </div>
      </div>
    );
  }
}

export default Panel;

组件单元测试：

import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import Panel from '../Panel/Panel';

describe('Panel', () => {
  let panel,
    panelData = {
      title: 'Sabrina girls!!',
      info: 'Some Sabrina best kitchen dishes'
    };

  beforeEach(() => {
    panel = shallow(<Panel panelDate={panelData} />);
  });

  it('renders as intended', () => {
    const component = renderer.create(<Panel panelData={panelData} />),
      json = component.toJSON();

    expect(json).toMatchSnapshot();
  });

  it('renders Panel title', () => {
    expect(panel.find('.panel-title').text()).toEqual('Sabrina girls!!');
  });

  it('renders Panel information', () => {
    expect(panel.find('.panel-info').text()).toEqual('Some Sabrina best kitchen dishes');
  });

  it('should remove the Panel', () => {
    const handleRemove = jest.fn();

    expect(panel.find('.panel-remove-btn').length).toEqual(1);

    // accessing the child element and simulate a click
    panel.first().find('.panel-remove-btn').simulate('click');

    expect(handleRemove).toHaveBeenCalled(); // <= "handleRemove" is not called even though I've defined it above and simulated a click event!
  });
});

Answer 1

问题是您创建了一个从未使用过的间谍。你需要测试Panel.prototype.handleRemove。所以在渲染之前你需要像这样模拟它，使用jest.spyOn：

const handleRemove = jest.spyOn(Panel.prototype, 'handleRemove');
expect(handleRemove).toHaveBeenCalled();

或

Panel.prototype.handleRemove = jest.spy()
expect(handleRemove).toHaveBeenCalled();

但是原来的函数不会被调用。