0
111
ViewsHow to select an input form that doesn't have a label with React testing library?
On this example, I'm trying to select the second input, change the value to some text and then fire the enter event. My main issue here is selecting the input since it doesn't have a label nor id
<ul>
<form>
<input value="" />
</form>
<form>
<input value="" />
</form>
</ul>
If anyone can help with I'd appreciate it.
·
Juan Pablo Isaza
2 answers
Answer question0
I would suggest adding a name attribute to your input fields as it's something you want to do anyway, regardless of testing. This way the correct values are sent when submitting the form.
<ul>
<form>
<input value="" name="firstName" />
</form>
<form>
<input value="" name="lastName" />
</form>
</ul>
Test could be:
getByRole('textbox', {name: /lastName/i})
Side note: You have 2 form elements, if both inputs relate to the same form they should exist in the same form tag.
·
Juan Pablo Isaza
Report
0
const inputs = document.getElementsByTagName('input');
console.log(inputs); // inputs[1] is second input
Here is inputs
·
Juan Pablo Isaza
Report
Answer question