Ответ
Data-атрибуты (data-*) помогают тестировать приложение, не полагаясь на хрупкие селекторы (классы, id). Вот основные способы их использования:
- Уникальные идентификаторы для элементов:
<button data-testid="submit-button">Отправить</button>- Состояния компонентов:
<div data-state="loading">Загрузка...</div>- Группировка связанных элементов:
<form data-role="login-form">
<input data-field="email">
<input data-field="password">
</form>- Тестовые метки для CI/CD:
<section data-qa="user-profile-section">Лучшие практики:
- Используйте единый префикс (
data-test,data-qa) - Называйте атрибуты осмысленно
- Не используйте их для стилей или логики приложения
- Удаляйте из production-сборки через babel-plugin-react-remove-properties