酶测试不改变输入值和提交表格

Question

I want to test the simple form below. I was able to easily test it with react-testing-library , but I want to demo the same test with enzyme .

Code

<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>

So I wrote the enzyme test to change the input value then click the 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();
});

However, my console.log 's are showing that input is not changing which means the button is still disabled so it can not be clicked. Therefore, the expect fails because the handleSubmitMock function is never called since the form is never submitted.

Here is a CodeSandbxox with the same code to mess around with.

Answer 1

The simulated click call does not properly propagate the submit event in the form, so you explicitly have to simulate the submit event to trigger it. In order for the form to submit, you need to change button.simulate('click') to button.simulate('submit') .