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如何在测试中构建，但它仍然不是相同的参考。我真的很好奇，这是可能的，或者测试这个的最佳方法是什么？

--------------- EDIT --------------------------

我的更新测试

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失败，因为事件也被传入，因此args是（事件，索引）。我如何断言事件被调用？我在这里得到一个失败的断言

Answer 1

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

构建当前测试的方式，似乎您正在测试箭头函数是否正确绑定this。如果是这种情况，测试并不真正引用您自己的代码，而是实际的ES实现，我认为您不应该在自己的测试中介绍。

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

1 个答案: