Jest 测试 React 表单提交答案

【问题标题】：Jest Testing React Form SubmitJest 测试 React 表单提交
【发布时间】：2020-03-29 13:42:14
【问题描述】：

我在尝试测试 React 表单提交时遇到错误。错误显示为 TypeError: Cannot read property 'value' of undefined 。我发现其他用户也有类似问题，但我的用户是独一无二的，因为我使用的是event.target.elements，而不是event.target.value。

这是我正在测试的功能：

  const handleSubmit = event => {
    event.preventDefault();
    const { createPassword, confirmPassword } = event.target.elements;
    if (createPassword.value !== confirmPassword.value) {
      setPassValidationError("*Passwords must match!");
    } else if (createPassword.value.length < 8) {
      setPassValidationError("*Passwords must be at least 8 characters long!");
    } else if (createPassword.value.search(/[A-Z]/) < 0) {
      setPassValidationError(
        "*Passwords must contain at least one uppercase letter!"
      );
    } else if (createPassword.value.search(/[!@#$%^&*]/) < 0) {
      setPassValidationError(
        "*Passwords must contain at least one special character!"
      );
    } else {
      props.updatePassword({
        uid: props.uid,
        token: props.token,
        new_password: createPassword.value
      });
      event.target.reset();
    }
  };

以下是表单中使用的输入字段：

<input id="create-password" type={passType} required />
<input id="confirm-password" type={passType} required />

现在，当我运行测试时，我希望 createPassword.value 和 confirmPassword.value 获取它们各自输入字段的模拟数据的值。这是我的测试：

it("passwords must be 8 char long", () => {
  const onMock = jest.fn();
  const wrapper = mount(<NoAuthPasswordChange handleSubmit={onMock} />);
  const passInput = wrapper.find("#create-password");
  const confirmPass = wrapper.find("#confirm-password");
  passInput.simulate("change", { target: { value: "QQQQQQ" } });
  confirmPass.simulate("change", { target: { value: "QQQQQQ" } });
  const form = wrapper.find("#no-auth-password-change-form");
  form.simulate("submit", { preventDefault: () => {} });
  expect(wrapper.find("#password-validation-error").text()).toContain(
    "*Passwords must be at least 8 characters long!"
  );
});

我该怎么做才能使createPassword.value 存在？

【问题讨论】：

这段代码 sn-p 是否有效，只是测试中断？这个错误发生在哪一部分？ TypeError: Cannot read property 'value' of undefined
@adamz4008 是的，代码有效。测试响应告诉我 value 没有为 createPassword.value 定义。我认为这与 simulate 没有绑定 event 有关。

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

你尝试过这样的事情吗？

form.simulate('submit', {
  preventDefault: () => {},
  target: {
    elements: {
      createPassword: { value: 'blah' },
      confirmPassword: { value: 'some value' }
    }
 });

【讨论】：

这里的name 字段应该使用什么？
哎呀，我认为没有必要把名字放在那里。太习惯使用target.name/value :-D。已编辑。
这似乎有效。这不是我想要的测试功能，因为我理想情况下会为每个输入字段分配一个相应的值，然后提交表单，但我相信这会正常工作！
最好更改handleSubmit()，因为它会在提交时查找元素属性。此外，在 React 中处理表单时，最好使用“受控表单”，其中您的输入值与某些组件状态同步，这会简化一些事情。