title: How do I unit test an object of arrays in React Testing Library?
body: <p>I have a parent component <code>CafeList.js</code> that makes a service call to firebase and returns cafe data as arrays within an object. I pass this entire object as props to <code>Cafe.js</code> where it is mapped over, and properties are destructured out and rendered (eg, the cafe name: <code>name</code>).</p>
  <p>I want to write a test to check that the <code>name</code> element is being rendering in the <code>Cafe.js</code> component, but I'm not sure how to access props that are in the form of an array or object. I'm new to RTL so am a bit lost - any suggestions?</p>
  <p><em><strong>CafeList.jsx</strong></em></p>
  <pre><code>import React, { useState,useEffect } from 'react'
  import db from '../fbConfig'
  import Cafe from './Cafe'
  
  const CafeList = () =&gt; {
      const [cafes,setCafe] = useState([])
      useEffect(() =&gt; {
          let cafeArray = []
          db.collection('cafes')
          .get()
          .then(snapshot =&gt; {
              snapshot.forEach(cafe =&gt; {
                  cafeArray.push(cafe)
              })
              setCafe(cafeArray)
          })
      },[])
  
  
  
     const [...cafeData] = cafes.map((cafe) =&gt; {
          const { name, photoURL } = cafe.data()
          return { name:name,photoURL:photoURL, id:cafe.id}
      })
  
      return(
          &lt;div className=&quot;cafe-container-container&quot;&gt;
              &lt;h2 className = 'main-subheading'&gt;Reviews&lt;/h2&gt;
              &lt;Cafe cafes = {cafeData}/&gt;
          &lt;/div&gt;
      )
  }
  
  export default CafeList
  </code></pre>
  <p><em><strong>Cafe.jsx</strong></em></p>
  <pre><code>import React from 'react'
  import {Link} from 'react-router-dom'
  
  const Cafe = ({ cafes }) =&gt; {
  
    return (
      &lt;div className=&quot;cafe-grid&quot;&gt;
        {
        cafes.map((cafe) =&gt; {
          return (
            &lt;Link
              to={`/cafe-reviews/${cafe.id}`}
              style={{ textDecoration: &quot;none&quot;, color: &quot;#686262&quot; }}
            &gt;
              &lt;div className=&quot;cafe-container&quot;&gt;
                &lt;h3&gt;{cafe.name}&lt;/h3&gt;
                &lt;img src={cafe.photoURL}&gt;&lt;/img&gt;
              &lt;/div&gt;
            &lt;/Link&gt;
          )
        })
        }
      &lt;/div&gt;
    )
  }
  export default Cafe
  </code></pre>
  <p><em><strong>cafe.test.js</strong></em></p>
  <pre><code>import { render, screen } from '@testing-library/react'
  import Cafe from '../components/Cafe'
  
  test('is cafe name rendering', () =&gt;{
      render(&lt;Cafe cafe = {[]}/&gt;)
      const nameElement = screen.getByText(//the cafe name as passed by props)
      expect(nameElement).toBeInTheDocument
  })
  </code></pre>