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

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

0 голосов
/ 13 февраля 2019

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

1 Ответ

0 голосов
/ 13 февраля 2019

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

Компонент Formik Field по умолчанию имеет элемент input ( source )

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

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

...