"screen.getByRole", Unable to find an accessible element with the role. But the element is-CodePudding

I don't understand how the role "div" was not found then the code follows to say there are not one but lots of "div"s, I tried to substitute the div for a "h5" seeing there is only one but returns the test pretty much the same error. What am I doing wrong?

I know that the error is in the line const div = screen.getByRole("div"); because if I comment it the test is all green.

Error:


  ● <CardInfo /> › should render the card

    TestingLibraryElementError: Unable to find an accessible element with the role "div"

    Here are the accessible roles:

      heading:

      Name "Lorem ipsum dolor sit.":
      <h5
        
      />

      --------------------------------------------------

    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div
          
        >
          <div
            
          >
            <h5
              
            >
              Lorem ipsum dolor sit.
            </h5>
            <p
              
            >
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quae aperiam voluptates distinctio aspernatur? Provident totam rerum dolorum hic et!
            </p>
          </div>
        </div>
      </div>
    </body>

       6 |     render(<CardInfo />);
       7 |
    >  8 |     const div = screen.getByRole("div");
         |                        ^
       9 |     // expect(div).toBeInTheDocument();
      10 |   });
      11 | });

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:40:19)
      at Object.<anonymous> (src/components/cardInfo/cardInfo.spec.jsx:8:24)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

this is my "cardInfo.spec.jsx" file:

import { render, screen } from "@testing-library/react";
import { CardInfo } from ".";

describe("<CardInfo />", () => {
  it("should render the card", () => {
    render(<CardInfo />);

    const div = screen.getByRole("div");
    // expect(div).toBeInTheDocument();
  });
});

This is my component:

import { Typography, Box, Card } from "@mui/material";

export const CardInfo = () => {
  return (
    <>
      <Card sx={{ maxWidth: 300 }}>
        <Box>
          <Typography variant={"h5"} sx={{ fontWeight: 800 }}>
            Lorem ipsum dolor sit.
          </Typography>
          <Typography>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quae
            aperiam voluptates distinctio aspernatur? Provident totam rerum
            dolorum hic et!
          </Typography>
        </Box>
      </Card>
    </>
  );
};

I want to make lot's of tests of the component to train how I should make tests, but I don't really get why this frist one is with this error, seems ok to me.

CodePudding user response：

When jest doesn't find the role, usually it shows what roles are accessible on the html, and for your case:

Here are the accessible roles:
   
   heading:

      Name "Lorem ipsum dolor sit.":
      <h5
        
      />

So, the role you are looking for is heading:

screen.getByRole("heading");