Reactjs 使用材料UI组件的酶单元测试onChange方法

如何在此组件上对onChange方法进行单元测试

Comment.js

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;

 state = {
      isComment: false,
      comment_body: ""
    }
    handleCommentChange = (e) => {
        this.setState({
           comment_body: e.target.value
        })             
    }

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

    }

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

注释组件正在另一个组件中传递，如下所示：

ImageContainer.js

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;

 state = {
      isComment: false,
      comment_body: ""
    }
    handleCommentChange = (e) => {
        this.setState({
           comment_body: e.target.value
        })             
    }

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

    }

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

状态={
isComment:false，
评论正文：“
}
handleCommentChange=（e）=>{
这是我的国家({
评论正文：e.target.value
})             
}
commentSubmit=（事件，id）=>{
event.preventDefault（）；
console.log（this.state.comment_body）；//不获取console.log
//请注意，commentBody也用于req.body，因此它被req.body.commentBody调用
const commentBody=this.state.comment\u body
常量数据={
评论机构，
身份证件
}   
本.道具.事后通知（数据）；
这是我的国家({
注释\u正文：“”
})
}
this.commentSubmit（e，img.id）}
commentBody={this.state.comment_body}
commentChange={this.handleCommentChange}/>

出现错误的原因是，当您调用

component.find（'input'）

时，它返回一个匹配组件的数组，因此您要做的是

component.find（'input'）。在（0）处。模拟（'change'）

但是，还有另一种方法可以测试这一点，这是我首选的方法

component.find（'input'）.at（0.props（）.onChange（）

下面是使用这两种方法进行测试的正确方法

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Comment from "./Comment";
import TextField from "@material-ui/core/TextField";

Enzyme.configure({ adapter: new Adapter() });

describe("Should render <Comment/> component", () => {
  it("should check for onChange method (1)", () => {
    // const wrapper = shallow(<Comment onChange={}/>)
    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 check for onChange method (2)", () => {
    // const wrapper = shallow(<Comment onChange={}/>)
    const onChangeMock = jest.fn();

    const component = shallow(
      <Comment commentChange={onChangeMock} commentBody={"test"} />
    );
    component
      .find(TextField)
      .at(0)
      .props()
      .onChange();
    expect(onChangeMock).toBeCalled();
  });
});

从“React”导入React；
从“酶”中导入酶，{shall}；
从“酶-适配器-反应-16”导入适配器；
从“/Comment”导入注释；
从“@material ui/core/TextField”导入TextField；
configure（{adapter:newadapter（）}）；
描述（“应呈现组件”，（）=>{
它（“应该检查onChange方法（1）”，（）=>{
//常量包装器=浅（）
const onChangeMock=jest.fn（）；
常数分量=浅(
);
成分
.find（文本字段）
.at（0）
.模拟（“变更”、“测试”）；
期望（onChangeMock）。通过（“测试”）调用；
});
它（“应该检查onChange方法（2）”，（）=>{
//常量包装器=浅（）
const onChangeMock=jest.fn（）；
常数分量=浅(
);
成分
.find（文本字段）
.at（0）
.props（）
.onChange（）；
expect（onChangeMock）.toBeCalled（）；
});
});

---

对于这个特定的测试，如果只使用

toBeCalled

而不是

toBeCalledWith

，效果会更好。无需测试调用它时使用的值。

出现错误的原因是，当调用

component.find（'input'）

时，它返回一个匹配组件的数组，因此您要做的是

component.find（'input'）。在（0）处。模拟（'change'）

但是，还有另一种方法可以测试这一点，这是我首选的方法

component.find（'input'）.at（0.props（）.onChange（）

下面是使用这两种方法进行测试的正确方法

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Comment from "./Comment";
import TextField from "@material-ui/core/TextField";

Enzyme.configure({ adapter: new Adapter() });

describe("Should render <Comment/> component", () => {
  it("should check for onChange method (1)", () => {
    // const wrapper = shallow(<Comment onChange={}/>)
    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 check for onChange method (2)", () => {
    // const wrapper = shallow(<Comment onChange={}/>)
    const onChangeMock = jest.fn();

    const component = shallow(
      <Comment commentChange={onChangeMock} commentBody={"test"} />
    );
    component
      .find(TextField)
      .at(0)
      .props()
      .onChange();
    expect(onChangeMock).toBeCalled();
  });
});

从“React”导入React；
从“酶”中导入酶，{shall}；
从“酶-适配器-反应-16”导入适配器；
从“/Comment”导入注释；
从“@material ui/core/TextField”导入TextField；
configure（{adapter:newadapter（）}）；
描述（“应呈现组件”，（）=>{
它（“应该检查onChange方法（1）”，（）=>{
//常量包装器=浅（）
const onChangeMock=jest.fn（）；
常数分量=浅(
);
成分
.find（文本字段）
.at（0）
.模拟（“变更”、“测试”）；
期望（onChangeMock）。通过（“测试”）调用；
});
它（“应该检查onChange方法（2）”，（）=>{
//常量包装器=浅（）
const onChangeMock=jest.fn（）；
常数分量=浅(
);
成分
.find（文本字段）
.at（0）
.props（）
.onChange（）；
expect（onChangeMock）.toBeCalled（）；
});
});

---

对于这个特定的测试，如果只使用

toBeCalled

而不是

toBeCalledWith

，效果会更好。无需测试调用它的值。

ok将尝试此操作，组件是否正常，代码中是否存在任何其他错误。im getting

方法“props”将在1个节点上运行。改为找到0。

这可能是材质错误，因为

来自材质UI@randal是的，同样的问题，你需要调用。我会更新答案，然后你需要确保

component

是你调用的正确元素。查找刚刚导入的TextField和

component.find（TextField）.props（）.onChange（）

ok将尝试此方法，组件是否看起来很好，代码中是否存在任何其他错误。im获取

方法“props”将在1个节点上运行。改为找到0。

这可能是材质错误，因为

来自材质UI@randal是的，同样的问题，你需要调用。我会更新答案，然后你需要确保

component

是你调用的正确元素。查找刚刚导入的TextField和

component.find（TextField）.props（）.onChange（）