我有一个反应挂钩形式和一些验证消息。我需要对该组件进行单元测试。但是一直以来,我的条件元素都没有被渲染或更新。我已经尝试过wrapper.update();
,但没有达到目的。
我的组件:
<form data-test='login-form' onSubmit={handleSubmit(onSubmit)}>
<input data-test='password' name='password'
ref={register({
required: 'Password Required',
minLength: {
value: 6,
message: 'Password should be 6 char long' ,
},
})}
/>
{errors.password && (
<p data-test='password-error'>
{(errors.password as any).message}
</p>
)}
<button data-test='login-submit'>
Submit
</button>
</form>
单元测试:
const setup = (): ShallowWrapper =>
shallow(<LoginForm />);
describe('Login Form Component', () => {
let wrapper: ShallowWrapper;
test('expect to show password required validation messages', async () => {
wrapper = setup();
const loginButton = wrapper.find(`[data-test='password-error']`);
loginButton.simulate('click');
wrapper.update();
const emailError = wrapper.find(`[data-test='email-error']`);
expect(emailError.length).toBe(1);
});
});
这永远不会过去。
感谢您的帮助。
预先感谢