Reactjs 使用Jest和Ezyme调用函数

我用Jest和酶来测试一种反应成分。我试图在提交表单时测试表单验证规则。测试需要涵盖此功能的所有可能情况

  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();
    }
  };

Jest告诉我找不到

#密码验证错误

（预期找到1个节点0）。现在，只有当

passValidationError

包含数据时，才会呈现代码的这一特定部分

{passValidationError ? (
   <h2
     className={styles.passwordError}
     id="password-validation-error"
    >
    {passValidationError}
    </h2>
  ) : null}

{passValidationError(
{passValidationError}
)：null}

我不确定我的测试中是否有一个简单的bug，或者是否需要做一些更高级的事情来使用Jest并进行函数调用和钩子更新

---

编辑：我开始怀疑

handleSubmit

函数所需的

事件

参数是否由于Jest调用的函数而有问题。

这可能是由于不更新组件本身造成的。您是否尝试强制重新呈现包装器：

---

这可能是由于不更新组件本身造成的。您是否尝试强制重新呈现包装器：

---

我找到了解决问题的方法。测试需要在表单元素本身上调用表单提交，而不是通过单击按钮。因此，我需要在表单元素上模拟提交，而不是

submitButton.simulate（“单击”）

。我不确定为什么此解决方案有效，而发布的代码无效。

我找到了解决问题的方法。测试需要在表单元素本身上调用表单提交，而不是通过单击按钮。因此，我需要在表单元素上模拟提交，而不是

submitButton.simulate（“单击”）

。我不确定为什么此解决方案有效，而发布的代码无效。

这是个好主意。不幸的是，它没有解决我的问题。我想知道这个问题是否是函数需要一个事件作为属性，但是当通过Jest调用它时，事件没有发生。这是一个好主意。不幸的是，它没有解决我的问题。我想知道问题是否可能是函数需要一个事件作为属性，但是当通过Jest调用它时，事件没有发生。

{passValidationError ? (
   <h2
     className={styles.passwordError}
     id="password-validation-error"
    >
    {passValidationError}
    </h2>
  ) : null}