Estoy tratando de obtener un elemento con el método getByRole de RTL (biblioteca de pruebas React).

Mi observación:

Funciona cuando agrego caracteres (12+).

Ex:

 // Form <Col xs={24} md={6}> <StyledLabel htmlFor="full-name-member"> <LargeFont>Member Name_</LargeFont> // this line </StyledLabel> <TextBox name="fullName" placeholder="Full Name" required={false} rule="text" maxLength={100} id="full-name-member" /> </Col>;

 screen.getByRole('textbox', { name: 'Member Name' });

Observe el guión bajo extra _ . Funciona cuando agrego un carácter más de lo que realmente se requiere.

He contado la longitud para ello. Es 12+ para funcionar correctamente donde si elimino un carácter adicional, no funciona como debería.

Ex:

 // Form <Col xs={24} md={6}> <StyledLabel htmlFor="full-name-member"> <LargeFont>Member Name</LargeFont> // this line </StyledLabel> <TextBox name="fullName" placeholder="Full Name" required={false} rule="text" maxLength={100} id="full-name-member" /> </Col>;

 screen.getByRole('textbox', { name: 'Member Name' });

Explicación:

• Styled es solo un prefijo para los componentes envueltos de componentes con estilo.
• Los componentes Col & TextBox pertenecen a ant-design .
• LargeFont es un contenedor alrededor del elemento div con css fijo.

¿Cuál podría ser la razón de este extraño comportamiento?