javascript - 如何使用 Enzyme 和 Jest 测试 Formik Fields？

Question

我想测试是否使用 Enzyme 渲染特定类型的输入字段。我正在使用 Formik 作为我的表格。但每次我为该特定用例编写测试时，我都会从 enzyme 中得到这个奇怪的对象错误。

    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>

你能告诉我我在这里做错了什么吗？根据文档示例，应该是这样。是福米克领域的一个特例。谢谢。

Answer 1

wrapper.find('text') 正在查找 text 元素，而不是文本类型的输入。

Formik 的 Field 组件默认为 input 元素 ( source )

尝试wrapper.find('input')

或者使用类:wrapper.find('.form-control')