title: What's the idiomatic way of testing a list with dynamic content using react-testing-library
body: <p>New to RTL and trying to understand how to do things idiomatically. I have a list with a dynamic element (it appears in some rows and not others).</p>
  
  <p>Here's the component:</p>
  
  <pre><code>import React from 'react'
  export default function DummyList ({ items }) {
    return &lt;div&gt;
      {items.map(item =&gt; &lt;ListItem item={item} key={item.name} /&gt;)}
    &lt;/div&gt;
  }
  
  export function ListItem ({ item: { name, isActive } }) {
    return &lt;div data-testid='list-item'&gt;
      &lt;span&gt;{name}&lt;/span&gt;
      {isActive &amp;&amp; &lt;span&gt;Active!&lt;/span&gt;}
    &lt;/div&gt;
  }
  </code></pre>
  
  <p>and here's the test</p>
  
  <pre><code>import React from 'react'
  import { render, getByText, queryByText, getAllByTestId } from '@testing-library/react'
  import '@testing-library/jest-dom/extend-expect'
  import DummyList from './index'
  
  describe('DummyList', () =&gt; {
    it('renders', async () =&gt; {
      const items = [
        { name: 'Unused Item' },
        { name: 'Used Item', isActive: true }
      ]
  
      render(&lt;DummyList items={items} /&gt;)
  
      const listItems = getAllByTestId(document.body, 'list-item')
      expect(listItems).toHaveLength(2)
  
      expect(getByText(listItems[0], 'Unused Item')).toBeInTheDocument()
      expect(queryByText(listItems[0], 'Active!')).not.toBeInTheDocument()
  
      expect(getByText(listItems[1], 'Used Item')).toBeInTheDocument()
      expect(queryByText(listItems[1], 'Active!')).toBeInTheDocument()
    })
  })
  </code></pre>
  
  <p>Questions</p>
  
  <p>1) Is there a way to avoid using data-testid in this scenario? Or is this a reasonable use of that escape hatch?</p>
  
  <p>2) More generally, is there a more idiomatic way of using RTL for testing this kind of component?</p>
  
  <p>Thanks!</p>