使用 Jest 和 Enzyme 调用函数答案

【问题标题】：Using Jest and Enzyme to call a function使用 Jest 和 Enzyme 调用函数
【发布时间】：2020-03-28 14:59:30
【问题描述】：

我正在使用 Jest 和 Enzyme 来测试一个 React 组件。我正在尝试在提交表单时测试我的表单验证规则。测试需要涵盖此功能的所有可能情况

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

这个函数很简单createPassword 和confirmPassword 是两个不同输入字段的值。当提交表单并调用此函数时，我正在根据不同的标准测试密码。如果密码不够强，则调用setPassValidationError 挂钩并更新状态变量。

我目前正在尝试使用少于 8 个字符的密码来测试该功能。


it("passwords must be 8 char long", () => {
  const wrapper = mount(<NoAuthPasswordChange />);
  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 submitButton = wrapper.find("#submit-button");
  submitButton.simulate("click");
  expect(wrapper.find("#password-validation-error").text()).toContain(
    "*Passwords must be at least 8 characters long!"
  );
});

Jest 告诉我找不到 #password-validation-error（预计找到 1 个节点 0）。现在这部分代码只有在passValidationError 有数据时才会呈现。

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

我不确定我的测试中是否只有一个简单的错误，或者是否需要做一些更高级的事情才能使用 Jest 并有一个函数调用钩子更新。

编辑：我开始怀疑 handleSubmit 函数所需的 event 参数是否有问题，因为该函数被 Jest 调用。

【问题讨论】：

标签： reactjs unit-testing testing jestjs enzyme

【解决方案1】：

我找到了解决问题的方法。测试需要在表单元素本身上调用表单提交，而不是通过单击按钮。因此，我需要在我的表单元素上模拟提交，而不是 submitButton.simulate("click")。我不确定为什么此解决方案有效而发布的代码无效。

【讨论】：

【解决方案2】：

这可能是由于未更新组件本身造成的。您是否尝试过强制重新渲染包装器： https://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html https://airbnb.io/enzyme/docs/api/ReactWrapper/update.html

【讨论】：

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