title: How to test if a component is rendered with the right props when using react-testing-library?
body: <p>I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones:</p>
  
  <pre><code>const News = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;News&lt;/h1&gt;
      ...
      &lt;FetchNextPageButton query={NEWS_QUERY} path="viewer.news" /&gt;
    &lt;/div&gt;
  )
  
  const Jobs = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Jobs&lt;/h1&gt;
      ...
      &lt;FetchNextPageButton query={JOBS_QUERY} path="viewer.jobs" /&gt;
    &lt;/div&gt;
  )
  
  const Posts = () =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Posts&lt;/h1&gt;
      ...
      &lt;FetchNextPageButton query={POSTS_QUERY} path="viewer.posts" /&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>The thing is that I'd not like having to add tests on each of these components for a functionality that is already tested somewhere else, so I think that should be enough just to test that the component is rendered and that I'm passing the right props to it.</p>
  
  <p>I'd have been able to test this easily with Enzyme with something like this:</p>
  
  <pre><code>expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({
    query: NEWS_QUERY,
    path: "viewer.news"
  })
  </code></pre>
  
  <p>So I'm wondering what's the best approach to test it by using <a href="https://github.com/testing-library/react-testing-library" rel="noreferrer">React testing library</a> instead.</p>