CODEWITHSUNDEEP
reactjsreact-testing-library
Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

getByRole query for paragraph not working during React testing

I have created a simple counter app for learning react testing library. But I got stuck when I was testing whether a paragraph is rendered or not with {count} text.

Main.jsx

function Main() {
  const [Count, setCount] = useState(0);

  function handleCount() {
    setCount((c) => c + 1);
  }
  return (
    <div>
      <h1>Counter App</h1>
      <Counter count={Count} />
      <Button label="Click me" handleCount={handleCount} />
    </div>
  );
}

Counter.jsx

function Counter({ count }) {
  return <p>{count}</p>;
}

Main.spec.jsx

it("should render count", () => {
    render(<Main />);
    expect(screen.getByRole("paragraph")).toBeInTheDocument();
});

This test was not enough to get passed. I know that we can add data-testid to <p> DOM node and then we can test this by getByTestId query. But I want to know why my above test case which uses getByRole('paragraph')is getting fail every time.

Upvotes: 22

Views: 39361

Answers (2)

alrizlan virtusa
alrizlan virtusa

Reputation: 5

getByText: Outside of forms, text content is the main way users find elements. This method can be used to find non-interactive elements (like divs, spans, and paragraphs)

Check TL Documentation https://testing-library.com/docs/queries/about/#byrole

Upvotes: 1

Thejool
Thejool

Reputation: 562

getByRole uses the HTML role of different elements. Paragraph is not a valid role, that's why your query doesn't work. You can read more here about getByRole https://testing-library.com/docs/dom-testing-library/api-queries/#byrole and about the different roles in html here: https://www.w3.org/TR/html-aria/#docconformance.

You could for example use getByText instead to achieve what you want (read more about preferred queries here: https://testing-library.com/docs/guide-which-query/).

expect(screen.getByText("0")).toBeInTheDocument();

Upvotes: 20

Related Questions