Я работал с тестами в 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");
Что именно мне делать? Спасибо