testing onSubmit prop that takes in a parameter - reactjs

Question

I have a <Comment/> component that takes an on onSubmit prop that takes in a parameter like this.
<Comment onSubmit={(e) => this.commentSubmit(e, img.id)}
commentBody={this.state.comment_body }
commentChange={this.handleCommentChange}/>
How would i be able to unit test the onSubmit prop given the parmaters ?
This is my attempt to test the <Comment/> component.
Comment.test.js
describe('Should render <Comment/> component', () => {
let wrapper;
beforeEach( () => {
wrapper = shallow(<Comment/>)
})
it('should test onSubmit', () => {
const onSubmit = jest.fn();
const mockEvent = {
onSubmit,
target:{
commentBody:"test",
id:23
}
};
const component = shallow(
<Comment onSubmit={mockEvent}/>
)
wrapper.find('form').simulate('submit');
expect(component).toBeCalled(1)
})
}
However i get this error
Matcher error: this matcher must not have an expected argument
The Comment component is within another component.
ImageContainer.js
class ImageContainer extends React.Component{
state = {
isComment: false,
comment_body: ""
}
commentSubmit = (event, id) => {
event.preventDefault();
console.log(this.state.comment_body); // doesn't get console.log
// note that commentBody is being used for the req.body as well so its called by req.body.commentBody
const commentBody = this.state.comment_body
const data = {
commentBody,
id
}
this.props.postComment(data);
this.setState({
comment_body: ''
})
}
render(){
const { img, deleteImg } = this.props
return(
<Comment onSubmit={(e) => this.commentSubmit(e, img.id)}
commentBody={this.state.comment_body }
commentChange={this.handleCommentChange}/>
)
}
const mapDispatchToProps = (dispatch) => ({
postComment: (data) => dispatch(postComment(data))
})
export default connect(mapStateToProps, mapDispatchToProps)(ImageContainer)
Comment component
import React from "react";
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
const Comment = (props) => (
<div>
<form onSubmit={props.onSubmit}>
<TextField
type="text"
id="outlined-multiline-static"
label="Write A Comment"
multiline
name="comment_body"
value={props.commentBody}
rows="10"
fullWidth
margin="normal"
variant="outlined"
onChange={props.commentChange}
/>
{/* <Button type="submit" variant="outlined" component="span" color="primary">
Post A Comment
</Button> */}
<button type="submit" variant="outlined" component="span" color="primary">
Write a Comment
</button>
</form>
</div>
)
export default Comment;

Answer 1

I made a fix, and the test passes. If this could be improved please make the changes. I'm still learning enzyme/jest unit testing.
it('should test onSubmit', () => {
const mockSubmit = jest.fn();
const component = shallow(
<Comment commentBody={'owl'} onSubmit={mockSubmit}/>
);
const props = {
id:2,
comment_body:'test'
}
console.log(component.debug())
component.find('form').simulate('submit', props);
expect(mockSubmit).toBeCalledWith({'comment_body': "test", "id": 2});
})

Answer 2

As I can remember you only need to pass your mock on onSubmit and your custom event on simulate, try something like this:
describe('Should render <Comment/> component', () => {
let wrapper;
beforeEach( () => {
wrapper = shallow(<Comment/>)
})
it('should test onSubmit', () => {
const onSubmit = jest.fn();
const mockEvent = {
// onSubmit, <-- Maybe not required
target:{
commentBody:"test",
id:23
}
};
const component = shallow(
<Comment onSubmit={onSubmit}/> // <-- Setup mock here
)
wrapper.find('form').simulate('submit', mockEvent); // <--- Your event here
expect(component).toBeCalled(1)
// expect(component).toHaveBeenCalledWith(...) <-- Assert right data is being called.
})
}