Фермент: Значение возвращает неопределенное при моделировании onSubmit

Question

Я пытаюсь смоделировать способ отправки формы.Таким образом, чтобы подвести итог, когда пользователь вводит в поле textarea ', компонент должен быть обновлен, затем пользователь нажимает кнопку отправки, и компонент снова обновляется.Я ожидаю, что значение, заполненное в текстовой области, будет пустым после того, как пользователь успешно отправит.Но неожиданно возвращаемое значение равно undefined.

CommentBox.js

import React from 'react';

class CommentBox extends React.Component {
    state = {
        comment: ''
    }

    handleChange = event => {
        this.setState({
            comment: event.target.value
        })
    }

    handleSubmit = event => {
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <h4>Add a comment</h4>
                <textarea onChange={this.handleChange} value={this.state.comment} />
                <div>
                    <button>Submit Comment</button>
                </div>
            </form>
        )
    }
}

export default CommentBox;

CommentBox.text.js

import React from 'react';
import { mount } from 'enzyme';
import CommentBox from 'components/CommentBox';

let wrapped;

beforeEach(() => {
    wrapped = mount(<CommentBox />);
})

afterEach(() => {
    wrapped.unmount();
})

it('when form is submitted, text area gets emptied', () => {
    wrapped.find('textarea').simulate('change', {
        target: { value: 'new comment' }
    })

    wrapped.update();
    wrapped.find('form').simulate('submit', {
        preventDefault: () => {}
    });
    wrapped.update();

    expect(wrapped.find('textarea').prop('value')).toEqual('');
})

Я ожидаю, что выходной сигнал будет пройден, но фактическим выходным значением является возвращаемое значение неопределенное, поэтому проверка не пройдена.

Answer 1

Я не вижу ничего, что могло бы сделать тест неудачным ... кроме как исключая this.setState({ comment: "" }); в обратном вызове handleSubmit.

Если вы используете state, то вам придется вручнуюсбросьте его (или если компонент размонтируется, то он автоматически потеряет state).Реакт работает, манипулируя виртуальным DOM.Затем вы используете state для управления элементами в этом виртуальном DOM.Так как вы запрещаете обновление страницы (e.preventDefault), state сохраняется как положено.

Рабочий пример (нажмите вкладку Tests - рядом с вкладкой Browser - для запуска теста):

---

компоненты / CommentBox

import React, { Component } from "react";

class CommentBox extends Component {
  state = { comment: "" };

  handleChange = ({ target: { value } }) => {
    this.setState({ comment: value });
  };

  handleSubmit = e => {
    e.preventDefault();

    console.log("submitted comment: ", this.state.comment);

    this.setState({ comment: "" });
  };

  render = () => (
    <div className="app">
      <form onSubmit={this.handleSubmit}>
        <h4>Add a comment</h4>
        <textarea
          className="uk-textarea"
          onChange={this.handleChange}
          value={this.state.comment}
        />
        <div className="button-container">
          <button type="submit" className="uk-button uk-button-primary">
            Submit Comment
          </button>
        </div>
      </form>
    </div>
  );
}

export default CommentBox;

компоненты / CommentBox / __ tests __ / CommentBox.test.js

import React from "react";
import { mount } from "enzyme";
import CommentBox from "../index";

describe("Comment Box", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<CommentBox />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it("when form is submitted, text area gets emptied", () => {
    wrapper.find("textarea").simulate("change", {
      target: { value: "new comment" }
    });

    expect(wrapper.find("textarea").prop("value")).toEqual("new comment");

    wrapper.find("form").simulate("submit", {
      preventDefault: () => {}
    });

    expect(wrapper.find("textarea").prop("value")).toEqual("");
  });
});

Answer 2

Вы можете попробовать это:

import React from 'react';

class CommentBox extends React.Component {
    //adding initVal for setting initial value in textbox
    // and playing with it until the form submits
    state = {
        comment: '',
        initVal: ''
    }

    handleChange = event => {
        //on change in textfield, updating initVal with the typed text
        this.setState({
            initVal: event.target.value
        })
    }

    handleSubmit = event => {
        //finally on submission comment is updated with entered value
        //which you may use it for further operations
        //and initVal is set back to empty '' for setting textfield value as empty 
        //field
        this.setState({
            comment: this.state.initVal
            initVal: ''
        })
        //event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <h4>Add a comment</h4>
                //changes here
                <textarea onChange={this.handleChange} value={this.state.initVal} />
                <div>
                    <button>Submit Comment</button>
                </div>
            </form>
        )
    }
}

export default CommentBox;

Answer 3

handleChange = (e) => {
 if(e.keyCode == 13 && e.shiftKey == false) {
  e.preventDefault();
  this.myFormRef.submit();
  }
}

render() {
  return (
    <form ref={el => this.myFormRef = el}  >
            <h4>Add a comment</h4>
            <textarea onKeyDown={this.handleChange} value={this.state.comment} 
             />
            <div>
                <button type="submit">Submit Comment</button>
            </div>
        </form>

 );
}

вы можете сделать это при вводе