酶模拟不改变textarea

Question

我正在尝试一个简单的测试来验证用户是否可以在文本区域输入文本，但由于某种原因，模拟方法不起作用。评论框组件class CommentBox extends Component {  state = { comment: "" };  handleChange = event => {    this.setState({ comment: event.value });  };  handleSubmit = e => {    e.preventDefault();    this.setState({ comment: "" });  };  render() {    return (      <form>        <h4>          Add a CommentBox          <textarea  onChange={this.handleChange} value={this.state.comment} />          <div>            <button onSubmit={this.handleSubmit}>Submit Comment</button>          </div>        </h4>      </form>    );  }}测试导出默认CommentBox；let wrapped;beforeEach(() => {    wrapped = mount(<CommentBox />);});afterEach(() => {    wrapped.unmount();});it('has a text area and a button', () => {    expect(wrapped.find('textarea').length).toEqual(1);    expect(wrapped.find('button').length).toEqual(1);});it('has a text area that users can type in' ,() => {    const textarea = wrapped.find('textarea');    textarea.simulate('change', {      target: {  ,         value: 'testing' }    });    wrapped.update();    expect(textarea.prop('value')).toEqual('testing');});错误 ：● 有一个用户可以输入的文本区域expect(received).toEqual(expected) // deep equalityExpected: "testing"Received: ""

Answer 1

问题 #1

handleChange = event => {

  this.setState({ comment: event.value });

};

实际上值是event.target.value。但我相信最好在争论中正确地进行解构：

handleChange = ({ target: { value }}) => {

  this.setState({ comment: value });

};

问题#2：重新渲染后，您必须.find('textarea')再次运行，而不是依赖先前的值；你也永远不需要wrapped.update()

所以

it('has a text area that users can type in' ,() => {

    wrapped.find('textarea').simulate('change', {

      target: { value: 'testing' }

    });

    expect(wrapped.find('textarea').props().value).toEqual('testing');

});

工作良好。