测试当 prop 是一个函数时，子组件 prop 是否正确构造

Question

我试图测试我的子元素上的道具是否设置正确。所以我有这个组件：

export default class Select extends React.Component {
    render() {
        return (
            <FormGroup className="col-md-3">
                <FormControl
                    componentClass="select"
                    name={this.props.name}
                    value={this.props.value}
                    onChange={(event) => this.props.onChange(event, this.props.index)}
                >
                    {this.getOptionElements()}
                </FormControl>
            </FormGroup>
        )
    }

我试图测试onchange功能正在正确设置。

it('should pass props to FormControl', () => {
    let props = {
        'options': [],
        'name': 'name',
        'value': "value",
        'index': '1',
        'onChange': () => {}
    };
    const expectedOnChange = (event) => this.props.onChange(event, this.props.index);
    const wrapper = mount(<Select {...props}/>);
    const formControlProps = wrapper.find('FormControl').props();
    expect(formControlProps.componentClass).to.equal('select');
    expect(formControlProps.name).to.equal(props.name);
    expect(formControlProps.value).to.equal(props.value);
    expect(formControlProps.onChange).to.equal(expectedOnChange);
});

我知道这是行不通的，因为函数不是同一个引用。有没有办法测试函数是否正确构造？我试图模仿onChange在测试中的构造方式，但它仍然不是相同的引用。我真的很好奇这是否可能，或者测试它的最佳方法是什么？

---------------编辑--------------------------

我更新的测试

it('should set onChange on FormControl and pass in event and index', () => {
    const onChangeStub = sinon.stub();
    const eventStub = sinon.stub();
    let props = {
        'options': [],
        'index': '1',
        'onChange': onChangeStub
    };
    const expectedOnChange = (event) => this.props.onChange(event, this.props.index);
    const wrapper = mount(<Select {...props}/>);
    const formControl = wrapper.find('FormControl');
    formControl.simulate('change', eventStub);
    onChangeStub.should.have.been.calledOnce;
    onChangeStub.should.have.been.calledWith(eventStub, props.index)
});

这个问题现在是我的断言。CalledWith 失败，因为事件也被传入，因此参数是（事件、索引）。如何断言事件被调用？我在这里得到一个失败的断言

Answer 1

onChange事件发生

时FormControl调用的函数是Select props的一部分。我认为测试它的方法是在初始化Select时在测试中传递一个模拟，并为组件触发一个onChange事件。模拟的调用次数应为一个。

您当前测试的构造方式似乎正在测试箭头函数是否正确绑定this。如果是这样的话，测试实际上并不是指你自己的代码，而是ES的实际实现，我认为你不应该在你自己的测试中涵盖。