Как протестировать Formik Fields с Enzyme и Jest?

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

    Expected value to have length:
      1
    Received:
      {Symbol(enzyme.__root__): {Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <WithFormik(AddEditUser) />, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render":
 [Function render], "simulateError": [Function simulateError], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): {"instance": null, "key": undefined, "nodeType": "class", "props": {"displayName":
 "AddEditUser", "enableReinitialize": false, "handleSubmit": [Function handleSubmit], "initialValues": {"confirmPassword": "", "email": "", "group": "", "password": "", "username": ""}, "isInitialValid": false, "onSubmit": [Function anonymous], 
"render": [Function anonymous], "validate": undefined, "validateOnBlur": true, "validateOnChange": true, "validationSchema": [Function anonymous]}, "ref": null, "rendered": null, "type": [Function Formik]}, Symbol(enzyme.__nodes__): [{"instance"
: null, "key": undefined, "nodeType": "class", "props": {"displayName": "AddEditUser", "enableReinitialize": false, "handleSubmit": [Function handleSubmit], "initialValues": {"confirmPassword": "", "email": "", "group": "", "password": "", "user
name": ""}, "isInitialValid": false, "onSubmit": [Function anonymous], "render": [Function anonymous], "validate": undefined, "validateOnBlur": true, "validateOnChange": true, "validationSchema": [Function anonymous]}, "ref": null, "rendered": n
ull, "type": [Function Formik]}], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true, "lifecycles": {"componentDidUpdate": {"onSetState": true}, "getDerivedStateFromProps": true, "getSnapshotBeforeUpd
ate": true, "setState": {"skipsComponentDidUpdateOnNullish": true}}}}}}, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], 
"simulateError": [Function simulateError], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): [], Symbol(enzyme.__options__): {"adapter": {"options": {"enableC
omponentDidUpdateOnSetState": true, "lifecycles": {"componentDidUpdate": {"onSetState": true}, "getDerivedStateFromProps": true, "getSnapshotBeforeUpdate": true, "setState": {"skipsComponentDidUpdateOnNullish": true}}}}}, Symbol(enzyme.__rootNod
es__): [{"instance": null, "key": undefined, "nodeType": "class", "props": {"displayName": "AddEditUser", "enableReinitialize": false, "handleSubmit": [Function handleSubmit], "initialValues": {"confirmPassword": "", "email": "", "group": "", "p
assword": "", "username": ""}, "isInitialValid": false, "onSubmit": [Function anonymous], "render": [Function anonymous], "validate": undefined, "validateOnBlur": true, "validateOnChange": true, "validationSchema": [Function anonymous]}, "ref": 
null, "rendered": null, "type": [Function Formik]}]}
    received.length:
      0

Вот мои тесты:

  it('Expects to have 1 text field in the form', () => {
    const wrapper = mount(<AddEditUser />);
    const text = wrapper.find('text');
    expect(text).toHaveLength(1);
  });

В основном он говорит, что он ищет текстовые поля и возвращает 0 вместе с вышеуказанной ошибкой.

Вот мой компонент:

<Fragment>
        <Form onSubmit = {handleSubmit}>
          <div className = "col-7">
            <div className = "my-3">
              <label>
                <span className = "font-weight-bold">Username</span>
                <span className = "text-danger">*</span>
              </label>
              <Field
                className = {classNames('form-control', {
                  'is-invalid': errors.username && touched.username
                })}
                placeholder = "Username (Required)"
                name = "username"
                type = "text"
              />
              {errors.username && touched.username ? (
                <div className = "text-danger">{errors.username}</div>
              ) : null}
            </div>
         </Form>
</Fragment>

Можете ли вы сказать мне, что я делаю неправильно здесь? Согласно примерам документации, это должно быть так. Это Formik fields, частный случай. Спасибо.

Вы можете предоставить полный код компонента?

wahdan 13.02.2019 11:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
4 593
1

Ответы 1

wrapper.find('text') ищет элемент text, а не ввод текста.

Компонент Formik Field по умолчанию является элементом input (источник)

Попробуйте wrapper.find('input')

Или Воспользуйтесь классом: wrapper.find('.form-control')

Другие вопросы по теме