ReactJS/Jest: Wie man eine Funktion testet/vortäuscht, die an Komponente übergeben wird

Question

Ich versuche, einige Unit-Tests mit Jest/Enzym für meine reagierenden Komponenten zu machen.

Aber ich habe Probleme mit einer Funktion, die ich an eine zweite Komponente übergebe. Ich verstehe nicht, wenn ich diese Funktion testen oder verspotten muss. Wenn ich es verspotten muss, weiß ich nicht, wie ich das für eine Funktion machen soll.

geordnete Komponente

export default class Parent extends Component { 
    togglePosition (term, event) { 
    this.setState({ 
     top: term.length >= 3 
    }) 
    } 

    render() { 
    return (
     <div> 
     <Child togglePosition={this.togglePosition} /> 
     </div> 
    ) 
    } 
} 

Kinderkomponente

export default class Child extends Component { 
    handleChange (event) { 
    const term = event.target.value 
    this.props.togglePosition(term) // <-- Test/mock it? 
    this.setState({ 
     loading: 'loading', 
     term 
    }) 
    } 

    render() { 
    return (
     <div> 
     <Input id="target-input" onChange={this.handleChange} /> 
     </div> 
    ) 
    } 
} 

Dies ist, wie ich einen Test für die Kinderkomponente tun - Prüfung handleChange:

Unit-Test (Child)

it('handleChange() should set state.term',() => { 
    const event = { target: { value: 'test' } } 
    const wrapper = shallow(<Child />) 

    wrapper.find('#target-input').simulate('change', event) 
    const state = wrapper.instance().state 
    expect(state).toEqual({ loading: 'loading', term: 'test' }) 
}) 

Sie diesen Fehler erhalten: TypeError: this.props.togglePosition is not a function

Answer 1

Ohne es wirklich zu testen, ich glaube, das ist, was Sie brauchen:

it('handleChange() should set state.term',() => { 
    const togglePosition = jest.fn(); 
    const event = { target: { value: 'test' } }; 
    const wrapper = shallow(<Child togglePosition={togglePosition} />); 

    wrapper.find('#target-input').simulate('change', event); 
    const state = wrapper.instance().state; 
    expect(state).toEqual({ loading: 'loading', term: 'test' }); 
    expect(togglePosition).toHaveBeenCalledWith('test'); 
}) 

Mock die übergebene Funktion: const togglePosition = jest.fn();, und testen Sie die Bedingung/Antwort : expect(togglePosition).toHaveBeenCalledWith('test');.