Я разработал компонент в response, который содержит поле ввода, которое может быть задано только когда-либо и, следовательно, должно быть доступно только для чтения, но не могу понять, как проверить, является ли этот ввод только для чтения в Enzyme.
Я не могу найти ничего об атрибуте readOnly, но у кого-то был аналогичный вопрос к Проверить, отключен ли вход. из этого кажется, что мне нужно использовать что-то вроде кода ниже.
test('select button select input must be read only', () => {
expect(select.find('div').find('div').find('input').hasAttribute('readOnly', 'true').toBeTruthy();
});
Однако hasAttribute
не распознается типом ShallowWrapper, и ни один из других методов в приведенной выше ссылке translate / work / не распознается.
Чтобы уточнить, мое поле ввода находится ниже.
<input readOnly = {true} type = "text" placeholder = {selectedOption} />
Кто-нибудь сталкивался с этим раньше? Как мне использовать Enzyme, чтобы проверить, что этот ввод доступен только для чтения?
В HTML DOM атрибутом является readonly
, readOnly
- это атрибут React DOM. readonly может быть readonly='true'
или просто readonly
, чтобы ввод не редактировался.
Пример HTML
<input type = "text" name = "country" value = "Norway" readonly>
Итак, ваш тестовый код нуждается в проверке
expect(select.find('div').find('div').find('input').hasAttribute('readonly', 'true').toBeTruthy();
Поскольку это тестируемый компонент, а не то, как React отображает его в DOM, он может быть:
expect(shallow(<Comp/>).find('div div input').prop('readOnly')).toBe(true);
Вот и все, спасибо! Также решает другие мои проблемы с атрибутами, такими как заполнители и т. д.
hasAttribute не распознается для типа ShallowWrapper