getByRole query for paragraph not working during React testing

Question

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.

Answer 1

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