酶测不改变输入值和提交形式

Question

我想测试下面的简单表格。我可以轻松地使用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("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。

Answer 1

模拟的click调用不能正确传播表单中的submit事件，因此您必须明确地模拟submit事件来触发它。为了提交表单，您需要将button.simulate('click')更改为button.simulate('submit')。