我正在使用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
是2个不同输入字段的值。提交表单并调用此函数后,我正在按不同条件测试密码。如果密码不够强,则会调用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!"
);
});
开玩笑告诉我找不到#password-validation-error
(预期1个节点找到0个)。现在,只有在passValidationError
有数据的情况下,才会呈现代码的这一特定部分。
{passValidationError ? (
<h2
className={styles.passwordError}
id="password-validation-error"
>
{passValidationError}
</h2>
) : null}
我不确定我的测试中是否只有一个简单的错误,或者是否需要做一些更高级的操作才能使用Jest并具有一个函数来调用钩子更新。
编辑:我开始怀疑event
函数所需的handleSubmit
参数是否由于Jest调用而出现问题。
答案 0 :(得分:0)
这可能是由于不更新组件本身引起的。您是否尝试过强制重新包装器: https://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html https://airbnb.io/enzyme/docs/api/ReactWrapper/update.html
答案 1 :(得分:0)
我找到了解决我问题的方法。测试需要在表单元素本身上调用表单提交,而不是通过单击按钮。因此,我需要在表单元素上模拟提交,而不是submitButton.simulate("click")
。我不确定为什么该解决方案有效,而发布的代码无效。