#javascript #reactjs #testing #react-testing-library
Вопрос:
В этом примере я пытаюсь выбрать второй ввод, изменить значение на некоторый текст, а затем запустить событие ввода. Моя главная проблема здесь заключается в выборе ввода, так как у него нет ни метки, ни идентификатора
<ul>
<form>
<input value="" />
</form>
<form>
<input value="" />
</form>
</ul>
Если кто-нибудь может помочь, я был бы признателен.
Комментарии:
1. Используете ли вы библиотеку тестирования React? Можете ли вы опубликовать пример тестового кода, который вы пробовали до сих пор?
2. Да, я использую RTL. Итак, я смог устранить эту проблему, сначала выбрав ввод, подобный этому
userEvent.type(screen.getAllByRole('textbox')[0], 'some random comment'), а затем снова выбрав ввод и запустив событие отправкиfireEvent.submit(screen.getAllByRole('textbox')[0]). Пожалуйста, имейте в виду, что я не очень хорошо разбираюсь в том, как использовать RTL, поэтому я уверен, что может быть лучший способ достичь этого.3. С точки зрения пользователя, есть ли причина, по которой у вас нет какой-то метки рядом с входом? Или заполнитель во входных данных?
4. Я добавил возможный ответ для вас, используя
nameатрибут.5. Попался. Я бы рекомендовал динамически добавлять
nameилиidпри добавлении задачи. Затем используйте getbyroleили getByTestId. Я добавил ответ для этогоnameподхода, так как считаю, что он лучше, чем id.
Ответ №1:
Я бы предложил добавить name атрибут в ваши поля ввода, так как это то, что вы все равно хотите сделать, независимо от тестирования. Таким образом, правильные значения отправляются при отправке формы.
<ul>
<form>
<input value="" name="firstName" />
</form>
<form>
<input value="" name="lastName" />
</form>
</ul>
Тест может быть:
getByRole('textbox', {name: /lastName/i})
Примечание: У вас есть 2 элемента формы, если оба входа относятся к одной и той же форме, они должны существовать в одном теге формы.
Ответ №2:
const inputs = document.getElementsByTagName('input');
console.log(inputs); // inputs[1] is second input
Вот inputs
