Por ejemplo:

Quiero probar si se mostrará mi logotipo CSS personalizado. Estoy tratando de evitar el uso del atributo 'data-testid' (porque supuestamente no se recomienda).

Componente del logotipo:

 const Logo = ({ size }) => ( <div className={styles.logoContainer}> <span className={size === 'small' ? `${styles.oSmall}` : `${styles.oBig}`} /> <span className={size === 'small' ? `${styles.lSmall}` : `${styles.lBig}`} /> <span className={size === 'small' ? `${styles.xSmall}` : `${styles.xBig}`} /> </div> );

Parte de otro componente cuando se procesa el componente 'Logotipo' (quiero probarlo aquí si el componente del logotipo se representará en este componente):

 <Container> <a title="anchor title" href="http://www.olx.pl" className="rel"> <Logo color="turquoise" size="small" /> </a> </Container>

Prueba :

 it('should render logo', () => { render(<ComponentWithLogo />); expect( screen.getByRole('link', { name: /anchor title/i }) ).toBeInTheDocument(); });

Supongo que esta no es la mejor manera de probar si un logotipo se mostrará, porque simplemente cambie el elemento secundario de esta etiqueta de anclaje y la prueba aún pasará. ¿Sería mejor usar data-testid (a un contenedor de envoltura) en este caso? He notado que este problema ocurre con frecuencia (principalmente cuando quiero probar si se ha renderizado un contenedor de componentes). ¿Es realmente malo usar data-testid en tales casos?