title: @testing-library/react TDD, react-bootstrap : Is this kind of test useful or just time loose
body: <p>I try to write my code with a TDD view, i meet the same problem all time, what should i test, and what i should not test, the goal is to make a navigation bar based on react-bootstrap with TDD, my component will be just a wrapper with less property to make it easy, i begin with the brand child component of Navbar in react-bootstrap.
  The ultimate goal is that the test reflect what the user should to test, for example that the brand logo img with the good src and alt properties is present in the Navigation.</p>
  
  <p><strong>Are these kind of tests interesting or to avoid?</strong>  </p>
  
  <p>My test</p>
  
  <pre><code>import React from 'react';
  import { render } from '@testing-library/react';
  import BrandNav from './BrandNav';
  
  test('testing brand navigation', () =&gt; {
      const altProp = 'message to show if image unavailable',
          srcProp = 'relativeFilePath',
          host = window.location;
  
      const { getByAltText } = render(&lt;BrandNav alt={altProp} src={srcProp} /&gt;);
  
      const brandLogo = getByAltText(altProp);
      expect(brandLogo.src).toEqual(`${host}${srcProp}`);
  });
  </code></pre>
  
  <p>My component</p>
  
  <pre><code>import React from 'react';
  import { Navbar } from 'react-bootstrap';
  
  const BrandNav = ({ alt, src }) =&gt; {
      return (
          &lt;Navbar.Brand&gt;
              &lt;img alt={alt} src={src} /&gt;
          &lt;/Navbar.Brand&gt;
      );
  };
  
  export default BrandNav;
  </code></pre>