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.
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.
const inputs = document.getElementsByTagName('input');
console.log(inputs); // inputs[1] is second input
Here is inputs
userEvent.type(screen.getAllByRole('textbox')[0], 'some random comment')and then selecting the input again and firing the submit eventfireEvent.submit(screen.getAllByRole('textbox')[0])Please keep in mind that I'm not well versed into how to use the RTL, so I'm sure there might be a better way to achieve this.nameattribute.nameoridwhile adding the Todo. Then use getByRole or getByTestId. I've added an answer for thenameapproach as I think it's better than id.