For example:

I want to test if my custom CSS logo will render. I am trying to avoid using 'data-testid' attribute (because is supposedly not recommended).

Logo component:

 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>
);

Part of another component when 'Logo' component is rendered (I want to test it here if the logo component will render in this component):

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

Test:

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

I guess that this is not best way to test if a logo will render, because just change the child of this anchor tag and the test will still pass. Would it be better to use data-testid (to a wrapping container) in this case? I've noticed that this problem occurs often (mostly when I want to test if a component container has been rendered). Is it really bad to use data-testid in such cases?