CODEWITHSUNDEEP
reactjsjestjsenzyme
randal
randal

Reputation: 1362

testing onSubmit prop that takes in a parameter

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;

Upvotes: 1

Views: 1518

Answers (2)

randal
randal

Reputation: 1362

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

})

Upvotes: 1

blitzcom
blitzcom

Reputation: 150

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.
    })
 }

Upvotes: 0

Related Questions