以onSubmit为道具的单元测试表格

Question

假设您有以下数据。

commentData = {
  id: 2,
  comment_body:'test example'
}

并且您有一个使用onSubmit道具的表单组件。

表单/注释示例

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;

然后在这样的父组件中使用注释组件

.....
class ImageContainer extends React.Component{
    state = {
      isComment: false,
      comment_body: ""
    }
    handleCommentChange = (e) => {
        this.setState({
           comment_body: e.target.value
        })             
    }
    writeComment = (id)  => {
        this.setState({
            isComment: this.state.isComment ? '' : id // check if you state is filled to toggle on/off comment
        })   
    }
    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, classes } = this.props
       return(
           <Grid item sm={12} md={12} className={classes.imageGridItem}>
             ......
               <Comment onSubmit={(e) => this.commentSubmit(e, img.id)} 
                            commentBody={this.state.comment_body } 
                            commentChange={this.handleCommentChange}/> 

            ......

            </Paper>                              
        </Grid>        
      )
   }
}

 const mapDispatchToProps = (dispatch) => ({
    postComment: (data) => dispatch(postComment(data))
 })
 export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(imageStyles))(ImageContainer)

正在像这样的redux动作中传递数据

动作

// post comment

export const postComment = data => {
    return async (dispatch) => {
        return Axios.post('/images/newComment', data).then( (response )=> {
            const newComment = response.data;
            const id = data.id
            // console.log(newComment);


            dispatch({type:POST_COMMENT, newComment, id })


        })
    }
}

我该如何正确进行单元测试。我知道我必须像进行动作的单元一样对单元测试进行分隔，对<Comment/>组件进行单元测试。

这是我尝试对onSubmit prop注释组件进行单元测试，我这样做对吗？

当前测试通过了，但是不确定这是否是对onSubmit道具进行单元测试的正确方法。

Comment.test.js

.....
describe('Should render <Comment/> component', () => {
    let wrapper;
    beforeEach( () => {
        wrapper = shallow(<Comment/>)
    })
    ......
    it("should check for onChange method (1)", () => {
        const onChangeMock = jest.fn();
        const component = shallow(
          <Comment commentChange={onChangeMock} commentBody={"test"} />
        );
        component.find(TextField).at(0).simulate("change", "test");
        expect(onChangeMock).toBeCalledWith("test");
      });
      it('should test onSubmit', () => {
        const mockSubmit = jest.fn();
        const component = shallow(
            <Comment commentBody={'owl'} onSubmit={mockSubmit}/>
        );
        const props = {
            id:2,
            comment_body:'test'
        }
        component.find('form').simulate('submit', props);
        expect(mockSubmit).toBeCalledWith({ 'comment_body': "test", "id": 2});
    })
})