在内部组件的输入标签中测试onChange函数-React

Question

我正在尝试为我拥有的球型项目创建测试用例

这是源代码

const InputComponent = () => (
<div>
    <input type="text" value={this.props.val} onChange={this.props.onInputChange.bind(this)}/>
</div>
)


const InnerComponent = () => (
<div>
    <InputComponent
        val={this.props.value}
        onInputChange={this.props.onInputChange.bind(this)}
    />
</div>
)


class MyComponent extends React.Component{
constructor(props){
    super(props);
    this.state={
        val: ''
    }
}

onInputChange = (e) => {
    const val = e.target.value;
    this.setState({val});
}

render(){
    return (
        <div>
           <InnerComponent
                val={this.state.val}
                onInputChange={this.onInputChange}
           /> 
        </div>
    )
}
}

因此，我正在尝试测试在InputCompoent的输入标签的onChange事件上发生的onChangeInput函数

我尝试使用jest.fn（）对其进行测试，但是当我尝试模拟输入更改时遇到错误

test(should test input change, () => {
const value = "coffee";
const onChangeInput = jest.fn();
const wrapper = shallow(<MyComponent/>);
wrapper.find('input').simulate(change, {target: value}); <----here I gets error coz input not found in dom
}

感谢您对我的帮助