getByDisplayValue для поля с установленным значением

В React Testing Library (RTL) одним из ключевых способов проверки взаимодействия с формами является поиск элементов по их текущему значению. Метод getByDisplayValue предназначен именно для этого: он позволяет находить элементы форм, такие как <input>, <textarea> или <select>, основываясь на значении, которое уже установлено в поле.

Синтаксис и основные принципы

const element = screen.getByDisplayValue(value, options);
  • value — строка, регулярное выражение или функция, по которому осуществляется поиск значения поля.
  • options — объект с дополнительными настройками, такими как selector, который позволяет уточнить тип элемента (например, "input", "textarea").

Ключевой момент: getByDisplayValue ищет именно отображаемое значение, а не defaultValue напрямую. Для <input> это значение из value, которое React устанавливает через состояние компонента или через defaultValue при первом рендере.

Примеры поиска по значению

Поиск текстового инпута
render(<input type="text" value="Пример" readOnly />);
const input = screen.getByDisplayValue('Пример');
expect(input).toBeInTheDocument();

В этом примере поле <input> сразу содержит значение "Пример". Метод getByDisplayValue позволяет получить этот элемент без необходимости указывать id или placeholder.

Использование регулярного выражения
render(<input type="text" value="React Testing" readOnly />);
const input = screen.getByDisplayValue(/react testing/i);
expect(input).toBeInTheDocument();

Регулярные выражения делают поиск более гибким, позволяя не зависеть от точного написания строки.

Проверка текстовой области <textarea>

render(<textarea value="Тестовая строка" readOnly />);
const textarea = screen.getByDisplayValue('Тестовая строка');
expect(textarea).toBeVisible();

getByDisplayValue одинаково корректно работает и с <textarea>, обеспечивая единый подход к тестированию полей ввода текста.

Проверка <select> и выбранных опций

render(
  <select value="option2" onCha nge={() => {}}>
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
  </select>
);

const select = screen.getByDisplayValue('Опция 2');
expect(select.value).toBe('option2');

Важно различать value элемента и отображаемый текст <option>. getByDisplayValue ищет элемент формы по отображаемому значению, которое соответствует выбранной опции.

Отличия getByDisplayValue от других методов поиска

  • getByLabelText ищет элементы по связанным с ними <label>.
  • getByPlaceholderText ориентируется на атрибут placeholder.
  • getByValue не существует в RTL, поэтому для поиска по текущему значению нужно использовать именно getByDisplayValue.

Использование getByDisplayValue особенно актуально при тестировании:

  • Автозаполненных форм.
  • Контролируемых компонентов (controlled components), где значение поля связано с состоянием React.
  • Сценариев с выбором опций в <select>.

Практические рекомендации

  1. Контролируемые компоненты: Если <input> или <textarea> управляются состоянием, getByDisplayValue всегда возвращает актуальное значение, что делает тесты стабильными при изменениях состояния.
  2. Чувствительность к регистру: По умолчанию поиск строго по строке чувствителен к регистру, поэтому при необходимости использовать регэксп с флагом i.
  3. Ошибки при отсутствии значения: Если элемент с указанным значением не найден, getByDisplayValue выбрасывает исключение. Для мягкой проверки лучше использовать queryByDisplayValue, который возвращает null.
const element = screen.queryByDisplayValue('Не существующее значение');
expect(element).toBeNull();
  1. Сложные формы: При наличии нескольких полей с одинаковым значением можно уточнить селектор через опцию selector:
const input = screen.getByDisplayValue('Пример', { selector: 'input[type="text"]' });

Проверка изменения значения

getByDisplayValue полезен и для проверки обновления значения после пользовательских действий:

render(<input type="text" value={value} onCha nge={(e) => setValue(e.target.value)} />);
userEvent.type(screen.getByDisplayValue(''), 'Новый текст');
expect(screen.getByDisplayValue('Новый текст')).toBeInTheDocument();

Это позволяет тестировать реакцию компонента на ввод без прямой работы с value через DOM.

Заключение по методике использования

Метод getByDisplayValue обеспечивает точный и надежный способ проверки значений полей формы. Он идеально подходит для:

  • Контролируемых и неконтролируемых компонентов.
  • Форм с предзаполненными значениями.
  • Проверки выбранных опций <select> и <textarea>.

Его правильное использование повышает читаемость тестов и снижает вероятность ошибок, связанных с выбором элементов по менее надежным атрибутам, таким как id или placeholder.

Оглавление