title: React Jest testing : TestingLibraryElementError: Unable to find an element
body: <p>i can't get the test id within my jest test. I am new to react testing. I want to test this component and get back for example the h3 text what was given before.</p>
  <p>Tells me:<br />
  &quot;TestingLibraryElementError: Unable to find an element by: [data-testid=&quot;testH3&quot;]&quot;</p>
  <p>Can you help me?</p>
  <pre><code>// Component
  import React from 'react';
  import './Card.scss'; 
  import Card from '@material-ui/core/Card';
  import { Link } from &quot;react-router-dom&quot;;
  
  function MovieCard({title, image}) {
      return (
          &lt;div className=&quot;card__container&quot;&gt;
              &lt;Link to={&quot;/details/&quot; + title}&gt;
                  &lt;Card className=&quot;card&quot;&gt;
                      &lt;img src={image} alt=&quot;&quot;/&gt;
                      &lt;div className=&quot;card__info&quot;&gt;
                          &lt;h3 
                              data-testid=&quot;testH3&quot;
                              className=&quot;card__title&quot;&gt;{ title }
                          &lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/Card&gt;            
              &lt;/Link&gt;
          &lt;/div&gt;
      )
  }
  
  export default MovieCard
  
  </code></pre>
  <pre><code>// test
  import React from 'react';
  import { render, screen, cleanup } from '@testing-library/react';
  import MovieCard from '../MovieCard';
  import { BrowserRouter as Router } from &quot;react-router-dom&quot;;
  
  afterEach(cleanup);
  
  describe('Test MovieCard', () =&gt; {
    const tree = render(
      &lt;Router&gt;
        &lt;MovieCard title=&quot;Batman&quot; image=&quot;imagesrc&quot;/&gt;
      &lt;/Router&gt;
    )
  
    it('should match with snapshot', () =&gt; {
      screen.debug();
      expect(tree).toMatchSnapshot();
     });
  
     it('test h3', () =&gt; {
       const {getByTestId} = tree;
       const element = screen.getByTestId('testH3')
      });
    });
  </code></pre>
  <p>UPDATE:</p>
  <p>Final code works now pretty well. Thank you guys</p>
  <pre><code>import React from 'react';
  import { render, screen, cleanup } from '@testing-library/react';
  import MovieCard from '../MovieCard';
  import { BrowserRouter as Router } from &quot;react-router-dom&quot;;
  
  afterEach(cleanup);
  
  describe('Test MovieCard', () =&gt; {
    function tree() {
      return render(
        &lt;Router&gt;
          &lt;MovieCard title=&quot;Batman&quot; image=&quot;imagesrc&quot;/&gt;
        &lt;/Router&gt;
      )
    }
  
    it('should match with snapshot', () =&gt; {
      expect(tree()).toMatchSnapshot();
     });
  
     it('test h3 text is Batman', () =&gt; {
       const {getByTestId} = tree();
       const element = screen.getByTestId('testH3')
       expect(element.textContent).toEqual(&quot;Batman&quot;)
       screen.debug();
      });
    });
  </code></pre>