如何用酵素和笑话测试Formik领域?

时间:2019-02-13 08:39:00

标签: javascript reactjs jestjs enzyme formik

我想用酶测试特定类型的输入字段是否被渲染。我正在使用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 :(得分:2)

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

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

尝试wrapper.find('input')

或使用课程:wrapper.find('.form-control')