React Jest testing : TestingLibraryElementError: Unable to find an element

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

You should move your rendering of the component inside a beforeEach . — Shyam, May 22 '21 at 20:25
when i put tree function inside a beforeEach then i get: ReferenceError: tree is not defined — MrGrashopper, May 23 '21 at 01:55
The `beforeEach` should set `let` variables that are in the `describe` callback scope. You could also move the rendering into each `it` block which achieves the same goal: keeping each `it` block state separate. Never let a rendered component carry from one `it` block to the next. This makes tests unreliable and hard to trust. — ggorlen, May 23 '21 at 02:12

miraj · Answer 1 · 2021-05-23T03:56:40.000

4

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

edited May 23 '21 at 03:56

answered May 22 '21 at 20:50

miraj

546
3
12

when I do this i get another error: TypeError: Cannot destructure property 'getByTestId' of 'tree(...)' as it is undefined. – MrGrashopper May 23 '21 at 01:37
this is obvious as i didn't return that rendered component. Updated the answer. could you check again? – miraj May 23 '21 at 03:58
Yes it works now thank you. final code above in update – MrGrashopper May 23 '21 at 17:22
in your updated code you will only get `getByTestId` . – miraj May 23 '21 at 17:24
Maybe you looked at the code in the answers? I updated the code at top. – MrGrashopper May 23 '21 at 17:39
1

Interesting. Worked for me. – Baris Senyerli Aug 02 '22 at 07:06
1

@MrGrashopper - If this worked for you, then, please mark accept this as the answer, so that others may benefit from it along with the author. Thanks! – shazwashere Mar 27 '23 at 11:15

React Jest testing : TestingLibraryElementError: Unable to find an element

1 Answers1

Linked