Stub/Mock PropTypes zum Testen

Question

Ich habe, was ein einfaches Problem scheint. Code funktioniert gut und alles ist großartig, aber wenn ich Komponente testen bekomme ich diese Warnung

fehlgeschlagen prop Typ: Steuerung prop Typ onStatusChange ist ungültig; es muss eine Funktion sein, in der Regel von React.PropTypes.in Steuerungen

Wenn ich .isRequired von onStatusChange entferne ich keine Warnung erhalten. Wie teste ich die Komponente, lasse aber das isRequired? Warum bekomme ich nicht den gleichen Fehler für countdownStatus prop, wo wir String vom Eltern übergeben?

Innerhalb meiner Kind Controls Komponente Ich habe einen Code wie folgt. Ich erwarte zwei Requisiten, eine Saite und eine Funktion.

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

Innen Eltern Komponente Ich habe diese. Wie Sie sehen können, gebe ich zwei Requisiten, eine Saite und eine Funktion an mein Kind weiter. Diese Requisite-Funktion kann von der Kind-Komponente aus aufgerufen werden und ruft helpStatusChange innerhalb der Parrent-Komponente auf.

... 
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} /> 
     } 
    } 
    ... 

Kind Komponententest. Ich benutze Band, Enzym, Sinon. Ich benutze nicht einmal diese Stütze für den Test, ich räume nur die gesamte Komponente flach.

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

Ich fand die Lösung. Ich musste nur leere Dummy-Funktion als eine Stütze während des Testens übergeben.

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) 
})