тестирование onSubmit prop, которое принимает параметр

Question

У меня есть компонент <Comment/>, который принимает подпорку onSubmit, которая принимает параметр, подобный этому.

<Comment onSubmit={(e) => this.commentSubmit(e, img.id)} 
         commentBody={this.state.comment_body } 
         commentChange={this.handleCommentChange}/> 

Как я смогу провести модульное тестирование подпорки onSubmit при заданных параметрах?

Это моя попытка проверить <Comment/> компонент.

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

Однако я получаю эту ошибку

Ошибка сопоставления: у этого сопоставителя не должно быть ожидаемого аргумента

Компонент Comment находится внутри другого компонента.

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)

Компонент комментария

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

Я исправил, и тест прошел. Если это можно улучшить, внесите изменения. Я все еще изучаю энзим / юнит-тестирование.

 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

Насколько я помню, вам нужно только передать свой макет на onSubmit и свое пользовательское событие на simulate, попробуйте что-то вроде этого:

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