How to test a component for a button click that has a function passed to it as props from the parent component - unit-testing

Question

I have a parent component that keeps all the state and that renders my child component inside a Router. I'm passing a function from parent to child as props to handle the button click.
import React, {Component} from 'react';
import 'whatwg-fetch';
import arrayOfObjects from '../arrayOfObjects';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import ChildComponent from './ChildComponent';
class Parent extends Component {
constructor() {
super();
this.fetchObject = this.fetchObject.bind(this);
const tempmyObject = {};
this.state = {
myObject: tempmyObject
};
}
fetchObject(event) {
const that = this;
fetch(path)
....
that.setState(
{
myObject: newObject
});
....
event.preventDefault();
};
render() {
return (
<Router>
<div>
<Route exact path='/GetUserInfo'
render={(props) => (
<ChildComponent {...props}
fields={arrayOfObjects}
myObject={this.state.myObject}
onChange={(event) => this.fetchObject(event)}
buttonName='foo'
/>
)}
/>
</div>
</Router>
);
}
}
export default Parent ;
import ShowChildComponent from './ShowChildComponent';
class ChildComponent extends Component {
render() {
return (
<div>
<ShowChildComponent
fields={this.props.arrayOfObjects}
myObject={this.state.myObject}
buttonName={this.props.name}
onChange={this.props.onChange}
/>
</div>
);
}
}
export default ChildComponent;
I'm using mount from enzyme and I would like to test it and simulate a button click in my unit tests, and then test for the changed data in the paragraph.
Previous to that, I had all state kept in the child component like this :
import React, {Component} from 'react';
import 'whatwg-fetch';
import ShowChildComponent from './ShowChildComponent';
class ChildComponent extends Component {
constructor(props) {
super(props);
this.fetchData = this.fetchData.bind(this);
const tempmyObject = {};
this.state = {
myObject: tempmyObject
};
}
fetchData(event) {
const that = this;
fetch(this.props.path)
.....
that.setState(
{
myObject: myObject,
});
....
event.preventDefault();
};
render() {
return (
<div>
<ShowChildComponent
fields={this.props.arrayOfObjects}
myObject={this.state.myObject}
buttonName={this.props.name}
onChange={this.fetchData}
/>
</div>
);
}
}
export default ChildComponent;
and I could simulate a click. My tests looked like this:
it('renders ChildComponent button click message', () => {
const wrapper = mount(<ChildComponent fields={arrayOfObjects}
myObject={myObject}
path={'/some/path'}
buttonName='foo'
/>);
const p = <p className='myParagraph' id={id}>{value}</p>;
wrapper.find('button.getData').simulate('click');
expect(wrapper.find(ShowChildComponent).containsMatchingElement(p)).toEqual(true);
});
How do I achieve the same thing after I refactored?