React-Hook-form＆＃x27; s formstate.Errors在开玩笑测试中的怪异行为

Question

我想进行验证。但是，当我在开玩笑中测试它时，错误消息将不会在第一个测试子句中的第一个Onblur中显示。但是，它在第​​二个测试条款中显示在第二个Onblur中。

在这里，我从第一个和第二子句中显示DOM，我们可以看到第二个Onblur之后的第二子句中显示了错误消息。

如何在第一个测试子句中的第一个Onblur中显示错误消息？

React文件

import React from 'react';
import { useForm } from 'react-hook-form';
import { string, object } from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';

interface TestingProps {
  fullname: string;
}

const TestingPage: React.FC = () => {
  const schema = object().shape({
    fullname: string().required('fullname is required!')
  });

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<TestingProps>({
    resolver: yupResolver(schema),
    mode: 'onBlur'
  });

  const submit = () => {};

  return (
    <div>
      <form onSubmit={handleSubmit(submit)}>
        <input className="testing" {...register('fullname')} />
      </form>
      {errors?.fullname && <p>{errors.fullname.message}</p>}
      <input type="submit" />
    </div>
  );
};
export default TestingPage;

开玩笑测试文件

import Enzyme, { mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import TestingPage from './TermsAndConditions';

Enzyme.configure({ adapter: new Adapter() });

describe('Testing page test', () => {
  let wrapper: any;

  test('first attempt to show error message onblur', () => {
    wrapper = mount(<TestingPage />);
    wrapper.find('.testing').simulate('focus');
    wrapper.find('.testing').simulate('blur');
    console.log(wrapper.debug());
  });

  test('second attempt to show error message onblur', () => {
    wrapper.find('.testing').simulate('blur');
    console.log(wrapper.debug());
  });
});

Answer 1

您只需要在测试断言之前等待，因为React-Hook-form-form验证和提交是异步的。使用齐平宣传，例如

function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}

  test('first attempt to show error message onblur', async () => {
    wrapper = mount(<TestingPage />);
    wrapper.find('.testing').simulate('focus');
    wrapper.find('.testing').simulate('blur');
    await flushPromises();
    console.log(wrapper.debug());
  });