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

但是我收到此错误

匹配器错误：此匹配器不得具有预期参数

注释组件在另一个组件中。

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

我解决了问题，测试通过了。如果可以改进，请进行更改。我仍在学习酶/笑话单元测试。

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs"
version="2.0">

<xsl:key name="movies" match="movie" use="tokenize(@directors, ' ')" />

<xsl:template match="/collection">
  <html>
    <body>
      <h3>Directors</h3>
      <ul>
        <xsl:apply-templates select="director" />
      </ul>
    </body>
  </html>
</xsl:template>

<xsl:template match="director">
  <li>
    <xsl:value-of select="name" />     
    <ul>
      <xsl:for-each select="key('movies', @id)">
        <li>
          <xsl:value-of select="title" />
        </li>
      </xsl:for-each>
    </ul>
  </li>
</xsl:template>
</xsl:stylesheet>

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

测试带有参数的onSubmit道具

2 个答案: