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

Я разработал компонент в 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, чтобы проверить, что этот ввод доступен только для чтения?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
3 010
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();

hasAttribute не распознается для типа ShallowWrapper

James Morrison 13.09.2018 12:29
Ответ принят как подходящий

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

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

Вот и все, спасибо! Также решает другие мои проблемы с атрибутами, такими как заполнители и т. д.

James Morrison 13.09.2018 12:30

Другие вопросы по теме