酶模拟不改变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 equality

Expected: "testing"

Received: ""

Answer 1

问题 #1handleChange = event => {&nbsp; this.setState({ comment: event.value });};实际上值是event.target.value。但我相信最好在争论中正确地进行解构：handleChange = ({ target: { value }}) => {&nbsp; this.setState({ comment: value });};问题#2：重新渲染后，您必须.find('textarea')再次运行，而不是依赖先前的值；你也永远不需要wrapped.update()所以it('has a text area that users can type in' ,() => {&nbsp; &nbsp; wrapped.find('textarea').simulate('change', {&nbsp; &nbsp; &nbsp; target: { value: 'testing' }&nbsp; &nbsp; });&nbsp; &nbsp; expect(wrapped.find('textarea').props().value).toEqual('testing');});工作良好。