Testing form input in jest and enzyme

十年热恋 提交于 2021-01-29 19:40:54

问题


I've been working with tests in react, and I'm in a trouble with testing form inputs.

FormInput component in register

 <FormInput
          data-test="form-input"
          className={`${errors.username && "input-error"}`}
          name="username"
          type="text"
          ariaLabel="Username" placeholder="Username"
          value={values.username}
          onChange={handleChange}
          onBlur={handleBlur}
          icon={
            <FaUser size={"3rem"} color={theme.colors.formInputBorderColor} />
          }
        />

This is FormInput component

export const FormInput = React.memo(({name,type,placeholder,value,onChange,onBlur,icon,className,ariaLabel}) => {

  return (
      <>
      <Input className={className} name={name} type={type} placeholder={placeholder} value={value} onChange={onChange} onBlur={onBlur} aria-label={ariaLabel}/>
      {icon}

      </>
  )
})

The test lines is like this as well. I have 3 FormInput in register, so I've used "at(0)"

it("Testing input events",() => {

      const component = wrapper.find("input").at(0);
      console.log(component.debug())
       //for selecting one input
       component.simulate("change",{
        target:{value:"username"}
       })

       expect(component.props().value).toEqual("username")
    })

And the result is

 Expected: "username"
    Received: ""

      54 |        })
      55 | 
    > 56 |        expect(component.props().value).toEqual("username")
         |                                        ^
      57 |     })
      58 |     it("Should render one form", () => {
      59 |       const component = findByTestAtrr(wrapper, "form");

What should I exactly do ? Thanks

来源:https://stackoverflow.com/questions/62088492/testing-form-input-in-jest-and-enzyme

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!