Я написал тестовый код «Кнопка обновления» для фермента. Есть 2 компонента, TextField и Button, и кнопка должна быть отключена, если значение TextField пусто, и должна быть включена, если значение TextField не пустое.
export default () => {
const classes = useStyles();
const [ disabledSave, setDisabledSave ] = useState(true);
const handleChangeInput = (e) => {
if (e.target.value === "") {
setDisabledSave(true)
} else {
setDisabledSave(false);
}
};
return (
<PageContainer>
<form className={classes.root} noValidate autoComplete="off">
<TextField
label="Input text here..."
onChange={handleChangeInput}
/>
<Button
variant="contained"
size="medium"
color="primary"
disabled={disabledSave}
>
Submit
</Button>
</form>
</PageContainer>
);
};
А ниже код проверяет код
let onChange;
beforeAll(() => {
onChange = jest.fn();
});
it('should change state correctly call onChange', () => {
const component = shallow(<Demo />);
const textField = component.find(TextField);
const button = component.find(Button);
textField.simulate('change', { target: { value: 'test' } });
component.update();
expect(button.find('[disabled=true]')).toHaveLength(0);
});
Не могли бы вы сказать мне, где я ошибся?
Код ошибки
FAIL src/pages/Demo/Demo.test.jsx ● Demo › should change state correctly call onChange
expect(received).toHaveLength(expected)
Expected length: 0
Received length: 1
Received object: {}
54 | textField.simulate('change', { target: { value: 'test' } });
55 | component.update();
> 56 | expect(button.find('[disabled=true]')).toHaveLength(0);
| ^
57 | });
58 | });