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가 테스트에서 어떻게 구성되는지를 모방하려고 시도했지만 여전히 동일한 참조가 아닙니다. 정말로 궁금한 Im은 이것이 가능한가, 아니면 이것을 테스트하기위한 최선의 접근 방식이 될 것인가?

---------------

내 업데이트 된 테스트

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

실패한 주장 onChange 이벤트가 발생 FormControl 통화 Select에 대한 props의 일부임을 기능을 점점. 이것을 테스트하는 방법은 Select을 초기화하고 구성 요소에 대해 onChange 이벤트를 트리거 할 때 테스트에서 모의 ​​객체를 전달하는 것입니다. 모의 전화 건수는 하나 여야합니다.

현재 테스트가 구성된 방식대로 화살표 기능이 this을 올바르게 바인딩하는지 테스트하는 것으로 보입니다. 그렇다면 실제로 테스트는 자신의 코드를 참조하는 것이 아니라 자체 테스트에서 다루지 않는 ES의 실제 구현을 참조하십시오.