reactjs - 使用 Jest 和 Enzyme 调用函数
问题描述
我正在使用 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 调用该函数而有问题。
解决方案
我找到了解决我的问题的方法。测试需要在表单元素本身上调用表单提交,而不是通过单击按钮。因此,submitButton.simulate("click")
我不需要在我的表单元素上模拟提交。我不确定为什么此解决方案有效而发布的代码无效。
推荐阅读
- java - JUnit4-Serenity:创建一个包含所有必需依赖项的可执行 jar 并独立运行测试
- javascript - Javascript:对 Infinity 的使用感到困惑
- java - exitEveryRule 是在 Antlr4 中捕获规则数据(源行)的最佳位置吗?
- spring-boot - 使用 JWT 进行 Spring Boot 会话管理
- sql - 仅当为输入参数找到某个元数据时,才在游标中加入 Oracle
- sqlite - SQLite; 而不是更新触发器;取回受影响的记录数
- mongodb - 使用 Mockito 和 JUnit 的 Spring Boot 中的 DELETE 方法
- php - 如何在 swift 5 中使用 alamofire 对登录到我的 iOS 应用程序的用户进行身份验证?
- python - 为什么我的加载屏幕没有使用 QThread 显示?
- android - Android 分页库无法正确向上滚动