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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


wrapper.find('text') ищет элемент text, а не ввод текста.
Компонент Formik Field по умолчанию является элементом input (источник)
Попробуйте wrapper.find('input')
Или Воспользуйтесь классом: wrapper.find('.form-control')
Вы можете предоставить полный код компонента?