ReactJSのjestと酵素を使用してコールバック関数をテストしますか？

Question

私はTDDに新しいですし、私は私の年齢構成要素で私のコールバック関数をテストしたい： 私Age.jsファイルは以下の通りです：

私 TextFieldComponentは以下の通りです

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

：

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

を

私は年齢構成要素のageValueCallBack機能をテストしたいが、私は、任意の特定の方法が到達するまで届きません。

洞察力が役立ちます。

おかげ..酵素で

Answer 1

あなたがsimulate('change', {}, 'someString')を使用してTextFieldComponentにonChangeイベントをトリガすることができます。 jest.fn()で作成したスパイするためにあなたのAge.jsニーズのselectAgeAction：あなたがしなければならない何

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