如何测试组件内部的函数?

Question

是否有测试组件内部函数的方法?例如，我有一个名为LoginPopUp的组件，该组件内部有一个登录表单:

<div data-testid="popup" className="popup-content">           
<h3 className="title">Login form </h3>
<form>
<div className="form-group">
<input data-testid="email" name="email" placeholder="Email" className="form-control"
type="email" onChange={e => setEmail(e.target.value)}/>
</div>
<div className="form-group">
<input data-testid="password" name="password" placeholder="Password" className="form-control"
type="password" onChange={e => setPassword(e.target.value)}/>
</div>                  
<button data-testid="loginBtn" onClick={handleLogin} type={"submit"}
className="popup-btn-login">Login
</button>
</form>
</div>

可以看到这是我的表单登录按钮是输入提交，按钮调用handleLogin点击这里是函数

function handleLogin(event) {
event.preventDefault();
if (email === '[e-mail]' && password === '123') {
localStorage.setItem('token', true);
localStorage.setItem('email', email)
closePopup(false)
} else {
closePopup(true);
setError(true);
}
}

我为组件本身编写了测试，但我想在登录成功和失败的情况下测试handleLogin的行为

Answer 1

我不明白你的意思吗?如果您想测试功能成功时的工作情况，只需输入当前的电子邮件和密码，如果您想测试功能失败时的情况，只需输入错误的输入即可。