Блог

У меня есть компонент формы (это упрощенный пример. На самом деле у меня гораздо больше полей):

     <form className="film-form" onSubmit={formik.handleSubmit}>
        <LabeledInput
          id="film-title"
          name="title"
          title="Title"
          value={formik.values.title}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={getErrorMessageForField('title')}
        />
          <Button
            title="save"
            onClick={formik.handleSubmit}
            className="film-form__actions__submit"
          />
    </form>
  

Я использую useFormik hook

   const formik = useFormik({
    initialValues: initialState,
    validationSchema: Yup.object({
      title: Yup.string().required('Title is required field'),
    }),
    onSubmit: onSave,
  });
  

и моя проверка и форма работают отлично.
Но когда я решил написать тест, я обнаружил, что enzyme всегда выходит из строя с одной и той же ошибкой, и я понятия не имею, как протестировать такие компоненты / формы с помощью enzyme

 describe('FilmForm', () => {
  test('when all fields are empty then errors is displayed', async () => {
    const onSubmit = jest.fn();
    const onClose = jest.fn();
    const form = mount(
      <FilmForm
        title="Add film"
        onSubmit={onSubmit}
        onClose={onClose}
        defaultGenres={[{ label: 'All', value: 'all' }]}
      />,
    );

    form.find('form.film-form').simulate('submit', { preventDefault: () => {} });
    form.update();

    expect(form.html()).toMatchSnapshot();
  });
});
  

В результате я вижу такую ошибку в выводе

 console.error
    Warning: An update to FilmForm inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
  

И второй

  console.warn
    Warning: An unhandled error was caught from submitForm() TypeError: Cannot read property 'body' of null
        at getActiveElement (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6651:16)
        at getActiveElementDeep (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6939:17)
        at getSelectionInformation (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6972:21)
        at prepareForCommit (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:7463:26)
        at commitRootImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22474:5)
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at commitRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22381:3)
        at finishSyncRender (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21807:3)
        at performSyncWorkOnRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21793:7)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11089:24
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at flushSyncCallbackQueueImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11084:7)
        at flushSyncCallbackQueue (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11072:3)
        at scheduleUpdateOnFiber (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21199:9)
        at dispatch (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:15660:5)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/formik/src/Formik.tsx:357:11
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at node_modules/formik/src/Formik.tsx:836:17
  

может кто-нибудь, пожалуйста, помогите или поделитесь, может быть, какие-то статьи
Заранее спасибо

В самом Formik есть много асинхронных методов и хуков внутри него, поэтому в вашем тесте вам также нужно писать асинхронным способом. Говоря о тестировании hook в целом, я рекомендую вам использовать react-testing-library вместе с enzyme and jest . Вы можете взглянуть здесь: https://testing-library.com/docs/react-testing-library/intro

Для получения более подробной информации о том, как использовать его конкретно с Formik . Я рекомендую вам прочитать эту статью, довольно хорошее объяснение. (Или можно погуглить « test formik with react-testing library )

Вкратце, вам нужно описать это в wait методе библиотеки. Что-то вроде этого:

   await wait(() => {
    fireEvent.change(color, {
      target: {
        value: "green"
      }
    })
  })

  await wait(() => {
    fireEvent.click(submit)
  })