带有反应挂钩形式的条件元素的Jest单元测试

时间:2020-10-27 15:48:10

标签: reactjs unit-testing jestjs enzyme react-hook-form

我有一个反应挂钩形式和一些验证消息。我需要对该组件进行单元测试。但是一直以来,我的条件元素都没有被渲染或更新。我已经尝试过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);
 });
});

这永远不会过去。

感谢您的帮助。

预先感谢

0 个答案:

没有答案