title: What is the difference "getByText" and "getByTestId" ? In testing-library/react
body: <p>What is the difference between <code>getByText</code> and <code>getByTestId</code>?</p>
  <p>When I had tested a React component, there were some gaps between these two functions.</p>
  <p>The test failed in <code>getByText</code> code, but it succeeded in <code>getByTestId</code>.</p>
  <p>I have code that when an element was clicked, the color of the title changed to red.</p>
  <p>Why this is the difference?</p>
  <p>I omitted styled-components of <code>Container</code> and <code>Content</code>. This has props 'toggled' to change the color to red.</p>
  <p>Here is the <code>getByText</code> code:</p>
  <pre class="lang-js prettyprint-override"><code>const { getByText } = render(&lt;ListPresenter content={ListText} /&gt;);
  const colorChangedText = getByText(/the party/);
  fireEvent.click(colorChangedText);
  screen.debug(); // The result of render I want !
  expect(colorChangedText).toHaveStyle(&quot;color: red&quot;);    * failed
  </code></pre>
  <p>Here is the <code>getByTestId</code> code:</p>
  <pre><code>const { getByText } = render(&lt;ListPresenter content={ListText} /&gt;);
  fireEvent.click(getAllByTestId(&quot;list-element-toggle&quot;)[0]);
  screen.debug(); // The result of render I want !
  const colorChangedText = getAllByTestId(&quot;list-element-content&quot;)[0];
  expect(colorChangedText).toHaveStyle(&quot;color: red&quot;);   * success
  </code></pre>
  <p>Here is the rendered component:</p>
  <pre><code>const Component = (props) =&gt; {
    return (
      &lt;Container
          className=&quot;container&quot;
          data-testid={&quot;list-element-toggle&quot;}
          toggled={state[data.id - 1]}
       &gt;
          &lt;Content className=&quot;content&quot; data-testid={&quot;list-element-content&quot;} toggled={state[data.id - 1]}&gt;
            {data.titleChild}.  // This text had been changed to red color when i was clicked.
          
          &lt;/div&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>