#reactjs #react-testing-library
#reactjs #react-testing-library
Вопрос:
Я использую react-testing-library в своем приложении. Обычно, чтобы проверить, находится ли ввод в форме, мы используем getByLabelText . Например:
getByLabelText(/name/i)
Но что, если у моего ввода нет метки? Это связано с дизайном (пользовательским интерфейсом), поэтому у меня не может быть метки для ввода. Как я могу проверить, существует ли этот ввод в форме?
Ответ №1:
Вы можете использовать следующее для настройки поля ввода текста.
getByRole('textbox', {name: /name/i})
Дополнительная информация https://testing-library.com/docs/queries/about#priority
Комментарии:
1. Как я могу узнать, что я получаю правильный ввод? Например, имя моего ввода — «name»
Ответ №2:
Вы также можете добавить aria-label к своему вводу:
<TextField inputProps={{'aria-label': "example" }} />
а затем в вашем тесте:
expect(screen.getByRole("textbox", { name: "example"})).toBeInTheDocument();
Ответ №3:
Вы можете добавить идентификатор теста к вводу, который будет использоваться исключительно для целей тестирования.
<input data-testid="your-id" />
И в вашем тесте вы бы выполнили a query
, а не get
as get
, что приведет к провалу теста, если элемент вообще не существует.
expect(queryByTestId('your-id')).toBeInTheDocument()
Или вы можете выполнить поиск по отображаемому значению, чтобы найти входное значение
expect(queryByDisplayValue('input-value')).toBeInTheDocument()
Ответ №4:
Если вы не знаете ожидаемый текст в своем вводе, вы можете добавить «data-testid» к своему вводу и найти его таким образом:
<input data-testid="my-input"/>
const myInput = getByTestId('my-input');
Комментарии:
1. Могу ли я получить его по имени ввода? Я не думаю, что мы должны добавлять data-testid ко всем входным данным. У меня около 30 входных данных в моей форме
2. Насколько я помню, вы можете, покопавшись
document
. Но это грязная работа.