Блог

Главная - Вопросы по программированию - Библиотека тестирования реакции — рендеринг не показывает всех дочерних элементов

Библиотека тестирования реакции — рендеринг не показывает всех дочерних элементов

#reactjs #react-testing-library #react-hook-form

#reactjs #react-testing-library #реагировать-форма-крючок

Вопрос:

Пытаюсь написать тест для моей формы react-hook, чтобы я мог проверить, правильно ли он отрисован. На данный момент я не справляюсь с первым препятствием и не могу заставить свою форму отображать своих дочерних элементов:

 const props = {
  request: true,
  title: "testing title",
  commentPlaceholder: "Placeholder",
  tip: "helpful tip",
  submitButtonText: "submit",
  onSubmit: jest.fn(),
  recipientName: "User one",
  activeStep: 2,
};

it('Should render the CommentForm as if it was in the request flow', async () => {
  const { getByText, getByTestId, debug } = render(
    <CommentForm {...props} />
  );

  console.log(debug());
});

В журнале консоли выводится следующее:

 <body>
  <div>
    <form />
  </div>
</body>

Где в качестве компонента, который я тестирую, в нем много дочерних элементов для создания формы.

Я прикрепил его к оболочке, которую я использую в компоненте.

<StyledForm onSubmit={onSubmit} schema={CommentSchema} onChange={handleChange}>

Если я изменю это на форму, то она отобразит всех моих дочерних элементов. Это стилизованный компонент, который расширяет этот метод ниже:

 const Form = ({ className, onSubmit, schema, defaultValues, children, mode, onChange, style }) => {
  const methods = useForm({
    defaultValues,
    validationSchema: schema,
    validateCriteriaMode: 'all',
    mode: mode || 'onSubmit',
  });
  const { handleSubmit, watch } = methods;
  const values = watch();

  useEffect(() => {
    onChange amp;amp; onChange(values);
  }, [onChange, values]);

  return (
    <FormContext {...methods}>
      <form style={style} className={className} onSubmit={handleSubmit(onSubmit)}>
        {children}
      </form>
    </FormContext>
  );
};

Я знаю, что это вызывает проблему, но я не могу понять, почему он не будет отображать компоненты. Это также причина, по которой, когда я меняю элемент StyledForm на обычный form , он работает.

** ОБНОВИТЬ **

Теперь выяснилось, что, похоже, это потому, что я расширяю styledComponent следующим образом:

  export const StyledForm = styled(Form)`
  width: 100%;
  margin: 0 auto 50px;
`;

Ответ №1:

 jest.mock('hoc/withForm', () => jest.fn(({ children }) => <form>{children}</form>));

Это было решение. Мне пришлось издеваться над моим HOC, чтобы он вернул более базовый элемент.

Метки: