Как проверить Формик Поля с Ферментом и Jest?

Question

Я хочу проверить, если конкретные типы полей ввода отображаются, с помощью 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, особый случай. Спасибо.

Answer 1

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

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

Пытаться wrapper.find('input')

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