title: getByRole query for paragraph not working during React testing
body: <p>I have created a simple counter app for learning <code>react testing library</code>. But I got stuck when I was testing whether a paragraph is rendered or not with <code>{count}</code> text.</p>
  <p>Main.jsx</p>
  <pre><code>function Main() {
    const [Count, setCount] = useState(0);
  
    function handleCount() {
      setCount((c) =&gt; c + 1);
    }
    return (
      &lt;div&gt;
        &lt;h1&gt;Counter App&lt;/h1&gt;
        &lt;Counter count={Count} /&gt;
        &lt;Button label=&quot;Click me&quot; handleCount={handleCount} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Counter.jsx</p>
  <pre><code>function Counter({ count }) {
    return &lt;p&gt;{count}&lt;/p&gt;;
  }
  </code></pre>
  <p>Main.spec.jsx</p>
  <pre><code>it(&quot;should render count&quot;, () =&gt; {
      render(&lt;Main /&gt;);
      expect(screen.getByRole(&quot;paragraph&quot;)).toBeInTheDocument();
  });
  </code></pre>
  <p>This test was not enough to get passed. I know that we can add <code>data-testid</code> to <code>&lt;p&gt;</code> DOM node and then we can test this by <code>getByTestId</code> query. But I want to know why my above test case which uses <code>getByRole('paragraph')</code>is getting fail every time.</p>