스텁/모의 prop 테스트 유형

Question

간단한 문제가있는 것 같습니다. 코드는 잘 작동하고 모든 것이 훌륭하지만 구성 요소를 테스트 할 때 나는이 경고를

실패 소품 종류 : 컨트롤 : 유형 소품 onStatusChange이 유효하지 않습니다; 그것은 내가 경고를 얻을 onStatusChange에서 .isRequired를 제거하면 React.PropTypes.in이

을 제어 일반적으로 에서, 함수해야합니다. 구성 요소를 테스트하지만 isRequired를 그대로 두려면 어떻게해야합니까? 왜 우리가 부모로부터 문자열을 전달하는지 countdownStatus prop에 대해 동일한 오류가 발생하지 않습니까?

인사이드 내 자식 컨트롤 구성 요소 나는 이와 같은 코드가 있습니다. 나는 두 개의 소품, 줄과 기능을 기대하고 있습니다.

class Controls extends Component { 
    static propTypes = { 
    countdownStatus: PropTypes.string.isRequired, 
    onStatusChange: PropTypes.func.isRequired 
    } 
... 
} 

구성 요소 부모 내부 나는이 있습니다. 보시다시피 저는 자식에게 두 개의 소품 인 문자열과 함수를 전달하고 있습니다.이 하위 함수는 하위 구성 요소 내부에서 호출 할 수 있으며 parrent 구성 요소 내에서 handleStatusChange를 호출합니다.

... 
handleStatusChange = (newStatus: string) => { 
    this.setState({ 
     countdownStatus: newStatus 
    }) 
    } 

    render(): React.Element<any> { 
    const { count, countdownStatus } = this.state 
    const renderControlArea =(): any => { 
     if (countdownStatus !== 'stopped') { 
     return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} /> 
     } else { 
     return <CountdownForm onSetCountdown={this.handleSetCountdown} /> 
     } 
    } 
    ... 

하위 구성 요소 테스트. 테이프, 효소, 사론을 사용합니다. 나는 테스트를 위해 그 소품을 사용하지 않습니다. 전체 구성 요소를 얕게 렌더링했습니다.

test('Controls => should render pause button when countdownStatus equals started', (t: Object) => { 
    t.plan(1) 
    const wrapper: Object = shallow(<Controls countdownStatus={'started'} />) 
    const pauseButton = wrapper.render().find('.btn-info').length 
    t.equal(pauseButton, 1) 
}) 

Answer 1

해결책을 찾았습니다. 테스트하는 동안 비어있는 더미 함수를 전달해야했습니다.

test('Controls => should render pause button when countdownStatus equals started', (t: Object) => { 
    t.plan(1) 
    const wrapper: Object = shallow(<Controls countdownStatus={'started'} onStatusChange={() => {}}/>) 
    const pauseButton = wrapper.render().find('.btn-info').length 
    t.equal(pauseButton, 1) 
})