问题
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