gpt4 book ai didi

reactjs - 使用 Jest 和 Enzyme 调用函数

转载 作者:行者123 更新时间:2023-11-28 20:47:50 25 4
gpt4 key购买 nike

我正在使用 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();
}
};

这个函数非常简单 createPasswordconfirmPassword 是 2 个不同输入字段的值。当提交表单并调用此函数时,我正在根据不同的标准测试密码。如果密码不够强,则会调用 setPassValidationError Hook 并更新状态变量。

我目前正在尝试使用少于 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 并让函数调用 Hook 更新。

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

最佳答案

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

关于reactjs - 使用 Jest 和 Enzyme 调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59165326/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com