Как проверить, доступен ли компонент ввода только для чтения, React / Enzyme

Question

Я разработал компонент в реакции, который содержит поле ввода, которое может быть установлено только когда-либо, и поэтому должно быть доступно только для чтения, но не может понять, как проверить, доступен ли этот вход только для чтения в 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, и ни один из других методов в приведенной выше ссылке не переводит / work /признаны.

Просто чтобы уточнить, мое поле ввода ниже.

<input readOnly={true} type="text" placeholder={selectedOption} />

Кто-нибудь сталкивался с этим раньше?Как бы я использовал Enzyme для проверки ввода только для чтения?

Answer 1

Поскольку это проверенный компонент, а не React отображает его в DOM, он может быть:

expect(shallow(<Comp/>).find('div div input').prop('readOnly')).toBe(true);

Answer 2

В 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();