ферментный тест, не изменяющий входное значение и отправляющий форму - PullRequest
Новая
       8

ферментный тест, не изменяющий входное значение и отправляющий форму

0 голосов
/ 09 января 2020

Я хочу проверить простую форму ниже. Я смог легко протестировать его с помощью react-testing-library, но я хочу продемонстрировать тот же тест с enzyme.

Код 

<form
  onSubmit={event => {
    event.preventDefault();
    handleSubmit(firstName);
    this.setState({
      firstName: ""
    });
  }}
>
  <label htmlFor="first-name">First Name:</label>
  <input
    id="first-name"
    value={firstName}
    onChange={this.handleChange}
  />
  <button disabled={!firstName} className="primary" type="submit">
    Submit
  </button>
</form>

Поэтому я написал тест enzyme для измените значение input, затем нажмите submit button.

Test 

test("should submit form when the submit button is pressed", () => {
  const handleSubmitMock = jest.fn();
  const names = [];
  const wrapper = mount(
    <Input handleSubmit={handleSubmitMock} names={names} />
  );
  const input = wrapper.find("#first-name");
  const button = wrapper.find("button.primary");

  input.simulate("change", { target: { value: "Bill" } });
  console.log(input.debug()); // input value unchanged ?
  console.log(button.debug()); // button still disabled ?‍♂️
  button.simulate("click");

  expect(handleSubmitMock).toHaveBeenCalled();
});

Однако мои console.log показывают, что вход не изменяется, что означает button по-прежнему disabled, поэтому его нельзя нажать. Следовательно, expect завершается ошибкой, потому что функция handleSubmitMock никогда не вызывается, поскольку form никогда не отправляется.

Вот CodeSandbxox с тем же кодом, с которым можно возиться.

1 Ответ

0 голосов
/ 10 января 2020

Имитированный вызов click неправильно передает событие submit в форме, поэтому вам явно нужно смоделировать событие submit, чтобы вызвать его. Для отправки формы вам необходимо изменить button.simulate('click') на button.simulate('submit').

...