title: React Testing Library Error: Uncaught [TypeError: Cannot read property 'map' of undefined]
body: <p>I am working on an app which generates a list of services using NextJS and the react testing library. Currently, I have test failing for rendering a service list component. This test fails due to the services not existing, even though they are being passed into the component.</p>
  <p>My <code>services.js</code> has the follow code:</p>
  <pre class="lang-js prettyprint-override"><code>import {
    Header,
    Container,
    Breadcrumb,
    Row,
    Col,
  } from &quot;components-library&quot;;
  import { Main } from &quot;../src/components/main&quot;;
  import { Card } from &quot;../src/components/card&quot;;
  
  export default function Home (props) {
    const {services} = props
    return (
      &lt;&gt;
        &lt;Header&gt;
          &lt;Header.Container&gt;
            &lt;Header.Logo href=&quot;/&quot; /&gt;
          &lt;/Header.Container&gt;
        &lt;/Header&gt;
        &lt;Breadcrumb data-testid=&quot;breadcrumb&quot;&gt;
          &lt;Breadcrumb.Item href=&quot;/&quot;&gt;Previous page&lt;/Breadcrumb.Item&gt;
        &lt;/Breadcrumb&gt;
        &lt;Container&gt;
          &lt;Main&gt;
            &lt;Row&gt;
              &lt;Col width=&quot;three-quarters&quot;&gt;
                {services.map(service =&gt; (
                    &lt;Card
                    title={service.title}
                    description={service.description}
                    url={service.url}
                  /&gt;
                ))}
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Main&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>With my <code>services.test.js</code> as follows:</p>
  <pre class="lang-js prettyprint-override"><code>import { render, screen } from &quot;@testing-library/react&quot;;
  import Page from &quot;../../../pages/services&quot;;
  describe(&quot;services api returns&quot;, () =&gt; {
    it(&quot;shows cards from getServices&quot;, async () =&gt; {
      render(&lt;Page services={[
        {
          title: &quot;Example Title&quot;,
          description: &quot;This is an example description&quot;,
          url: &quot;https://www.google.com&quot;,
        },
      ]} /&gt;);
      expect(screen.getByText(&quot;Example Title&quot;)).toBeInTheDocument();
    })
  });
  </code></pre>
  <p>I get the error that</p>
  <pre><code>Error: Uncaught [TypeError: Cannot read property 'map' of undefined]
  </code></pre>