Question

我一直在用React进行测试，但是在测试表单输入时遇到麻烦。

寄存器中的FormInput组件

 <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} />
          }
        />

这是FormInput组件

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}

      </>
  )
})

测试线也是如此。我在寄存器中有3个FormInput，所以我用了“ 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")
    })

结果是

 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");

我该怎么办？谢谢

测试表格中的笑话和酶

0 个答案: