React Jest testing : TestingLibraryElementError: Unable to find an element - reactjs

Question

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.
Tells me:
"TestingLibraryElementError: Unable to find an element by: [data-testid="testH3"]"
Can you help me?
// Component
import React from 'react';
import './Card.scss';
import Card from '#material-ui/core/Card';
import { Link } from "react-router-dom";
function MovieCard({title, image}) {
return (
<div className="card__container">
<Link to={"/details/" + title}>
<Card className="card">
<img src={image} alt=""/>
<div className="card__info">
<h3
data-testid="testH3"
className="card__title">{ title }
</h3>
</div>
</Card>
</Link>
</div>
)
}
export default MovieCard
// test
import React from 'react';
import { render, screen, cleanup } from '#testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";
afterEach(cleanup);
describe('Test MovieCard', () => {
const tree = render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
it('should match with snapshot', () => {
screen.debug();
expect(tree).toMatchSnapshot();
});
it('test h3', () => {
const {getByTestId} = tree;
const element = screen.getByTestId('testH3')
});
});
UPDATE:
Final code works now pretty well. Thank you guys
import React from 'react';
import { render, screen, cleanup } from '#testing-library/react';
import MovieCard from '../MovieCard';
import { BrowserRouter as Router } from "react-router-dom";
afterEach(cleanup);
describe('Test MovieCard', () => {
function tree() {
return render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
}
it('should match with snapshot', () => {
expect(tree()).toMatchSnapshot();
});
it('test h3 text is Batman', () => {
const {getByTestId} = tree();
const element = screen.getByTestId('testH3')
expect(element.textContent).toEqual("Batman")
screen.debug();
});
});

Answer 1

use function instead of const
describe('Test MovieCard', () => {
function tree() {
return render(
<Router>
<MovieCard title="Batman" image="imagesrc"/>
</Router>
)
}
it('should match with snapshot', () => {
screen.debug();
expect(tree()).toMatchSnapshot();
});
it('test h3', () => {
const {getByTestId} = tree();
const element = screen.getByTestId('testH3')
});
});