如何在React with Enzyme中测试由子组件回调调用的组件回调？

rfgamaral

说我有以下应用程序：

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没有以下情况的情况下调用click回调：

...渲染Child。Parent应该作为浅层渲染单独进行测试。Child还将单独进行测试，如果我执行了挂载渲染，则基本上是Child两次测试click回调。
...直接调用handleParentOnClick的Parent实例。我不应该依赖Parent于此的确切实现。如果更改回调函数的名称，则测试将中断，并且很可能是误报。

还有第三种选择吗？

安德烈·贝巴拉斯基（Andrei Baibaratsky）

在测试时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
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。