unit-testing - 如何使用 Enzyme 测试 React 中子组件回调调用的组件回调？

Question

假设我有以下应用程序:

class Child extends React.Component {
    render() {
        return <button onClick={this.handleChildOnClick}>{this.props.children}</button>;
    }

    handleChildOnClick() {
        this.props.onChildClick('foo');
    }
}

class Parent extends React.Component {
    render() {
        return <Child onChildClick={this.handleParentOnClick}>click me</Child>;
    }

    handleParentOnClick(text) {
        this.props.onParentClick(12345);
    }
}

class App extends React.Component {
    render() {
        return <Parent onParentClick={(num) => console.log(num)} />;
    }
}

我很难找出测试Parent组件的正确方法。 Child 和 App 不是问题，但是 Parent...

我的意思是，如何测试对 Child 组件的点击是否会调用 Parent 点击回调，而无需:

1. ...渲染子项。 Parent 应作为浅层渲染单独进行测试。 Child 也将进行单独测试，如果我进行安装渲染，我基本上会测试 Child 上的点击回调两次。
2. ...直接调用 Parent 实例上的 handleParentOnClick。我不应该为此依赖 Parent 的确切实现。如果我更改回调函数的名称，测试就会中断，并且很可能是误报。

还有第三种选择吗？

Answer 1

在测试Parent时，您可以执行以下操作:

import { shallow } from 'enzyme';
import { stub } from 'sinon';

describe('<Parent/>', () => {
  it('should handle a child click', () => {
    const onParentClick = stub();
    const wrapper = shallow(<Parent onParentClick={onParentClick} />);
    wrapper.find("Child").prop('onChildClick')('foo');
    expect(onParentClick.callCount).to.be.equal(1);
    // You can also check if the 'foo' argument was passed to onParentClick
  });
});