Test d'un rappel Fonction utilisant jest et enzyme dans ReactJS?

Question

Je suis nouveau à TDD et je veux tester ma fonction de rappel dans mon composant Âge: mon Age.js fichier suit:

import React, { Component } from "react"; 
import { connect } from "react-redux"; 
import actions from "../../actions"; 
import TextFieldComponent from "../Module/TextFieldComponent"; 

export class Age extends Component { 

    ageValueCallBack = age => { 
    console.log("value is : ", age); 
    this.props.selectAgeAction(age) 
    }; 

    render() { 
    const props = { 
     onChange: this.ageValueCallBack, 
     hintText : 'Eg. 25', 
     floatingLabelText: "Age(Years)", 
     value : (this.props.usersData) ? this.props.usersData.basic.age : null 
    }; 
    return <TextFieldComponent {...props} />; 
    } 
} 

function mapStateToProps({ usersData }) { 
    return { 
    usersData 
    }; 
} 

export default connect(mapStateToProps, { 
    selectAgeAction: actions.selectAgeValue 
})(Age); 

où mon TextFieldComponent suit:

import TextField from "material-ui/TextField"; 

const TextFieldComponent = props => { 
    return (
    <TextField 
     onChange={(event, string) => { 
     props.onChange(string) 
     }} 
     floatingLabelText={props.floatingLabelText || "floatingLabelText"} 
     value={props.value || null} 
     hintText={props.hintText || "hintText will be here"} 
     autoFocus ={true || props.autoFocus} 
    /> 
); 
}; 

Je veux tester ageValueCallBack fonction du composant Age mais je ne reçois aucune méthode particulière pour y parvenir.

Un aperçu sera utile.

Merci ..

Answer 1

avec l'enzyme, vous pouvez déclencher l'événement onChange sur le TextFieldComponent en utilisant simulate('change', {}, 'someString'). Le selectAgeAction dans vos Age.js a besoin d'être un espion créé avec jest.fn():

const selectAgeAction = jest.fn() 
const component = shallow(<Age selectAgeAction={selectAgeAction} />) 
component.find('TextField').simulate('change', {}, '10') 
expect(selectAgeAction).toHaveBeenCalledWith('10')