Фермент имитирует не изменяющуюся текстовую область

Question

Я пытаюсь выполнить простой тест, чтобы проверить, может ли пользователь ввести текст в текстовую область, но по какой-то причине метод имитации не работает ..

Компонент CommentBox

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

тестовый экспорт по умолчанию

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

отлично работает.