getByPlaceholderText практическое применение

getByPlaceholderText — это метод из библиотеки React Testing Library, предназначенный для поиска элементов формы по значению атрибута placeholder. Он используется преимущественно для работы с <input> и <textarea>, где placeholder задаёт подсказку пользователю.

Синтаксис:

const element = screen.getByPlaceholderText(text, options);

text — строка или регулярное выражение, соответствующее значению placeholder.
options — необязательный объект с дополнительными настройками поиска, например { exact: true }.

Метод возвращает один элемент и выбрасывает ошибку, если элемент не найден или найдено несколько совпадений. Для безопасного поиска без выброса ошибки используют queryByPlaceholderText.

Примеры базового использования

Поиск по точному совпадению

import { render, screen } from '@testing-library/react';
import LoginForm from './LoginForm';

render(<LoginForm />);
const usernameInput = screen.getByPlaceholderText('Введите имя пользователя');
expect(usernameInput).toBeInTheDocument();

В этом примере getByPlaceholderText находит поле ввода по точному тексту placeholder. Метод полезен при тестировании форм, где placeholder фиксирован и уникален.

Поиск с использованием регулярного выражения

const passwordInput = screen.getByPlaceholderText(/пароль/i);
expect(passwordInput).toHaveAttribute('type', 'password');

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

Различие `getByPlaceholderText` и `queryByPlaceholderText`

getByPlaceholderText — выбрасывает ошибку при отсутствии элемента. Подходит для утверждений, где элемент обязателен.
queryByPlaceholderText — возвращает null, если элемент не найден. Используется для тестов на отсутствие компонента или условное рендеринг.

const emailInput = screen.queryByPlaceholderText('Электронная почта');
expect(emailInput).toBeNull();

Работа с динамическими формами

В компонентах, где поля формы создаются динамически, placeholder может быть изменяемым. В таких случаях рекомендуется использовать регулярные выражения или параметры exact: false:

const dynamicInput = screen.getByPlaceholderText(/имя/i, { exact: false });
expect(dynamicInput).toBeInTheDocument();

Опция exact: false позволяет искать элементы, текст placeholder которых содержит указанную подстроку.

Интерактивные тесты с `getByPlaceholderText`

getByPlaceholderText часто комбинируется с пользовательскими событиями для имитации ввода данных:

import userEvent from '@testing-library/user-event';

const input = screen.getByPlaceholderText('Введите имя пользователя');
userEvent.type(input, 'Алексей');
expect(input).toHaveValue('Алексей');

Этот подход позволяет проверить корректность обработки пользовательского ввода и связывания данных с состоянием компонента.

Проверка валидации формы

Для тестирования поведения формы при вводе данных getByPlaceholderText используется совместно с ассерциями, проверяющими ошибки или состояние формы:

const emailInput = screen.getByPlaceholderText('Электронная почта');
userEvent.type(emailInput, 'невалидныйemail');
userEvent.click(screen.getByText('Отправить'));
expect(screen.getByText('Введите корректный email')).toBeInTheDocument();

Такой подход позволяет тестировать реакцию компонента на неправильные значения без прямого обращения к элементам по id или class.

Комбинация с другими методами поиска

Часто getByPlaceholderText применяется вместе с getByRole или getByLabelText для более точного контроля над тестами:

const input = screen.getByPlaceholderText('Пароль');
const submitButton = screen.getByRole('button', { name: /войти/i });
userEvent.type(input, '123456');
userEvent.click(submitButton);
expect(screen.getByText('Добро пожаловать')).toBeInTheDocument();

Такой подход улучшает читаемость теста и снижает зависимость от структуры DOM.