title: Test map function with jest
body: <p>I have a problem with testing this component that has a map function for rendering various icontype:</p>
  <pre><code>import { FaSwimmer, FaWifi, FaCoffee, FaUtensils, FaSnowflake, FaSmokingBan, FaCocktail, FaPaw, FaCar, FaConciergeBell, FaDumbbell, FaSpa, FaTv } from &quot;react-icons/fa&quot;;
  import &quot;./Characteristics.css&quot;;
  
  function Characteristics(props) {
  
      const { productCharacteristics, page } = props;
  
      function parseIcons(icon) {
                  case 'FaWiFi':
                      return &lt;FaWifi className=&quot;service-icon-home&quot; /&gt;
                  case 'FaSwim':
                      return &lt;FaSwimmer className=&quot;service-icon-home swimmer-icon&quot; /&gt;
                  case 'FaCoffee':
                      return &lt;FaCoffee className=&quot;service-icon-home&quot; /&gt;
                  case 'FaUtensils':
                      return &lt;FaUtensils className=&quot;service-icon-home&quot; /&gt;
                  case 'FaSnowflake':
                      return &lt;FaSnowflake className=&quot;service-icon-home&quot; /&gt;
                  case 'FaSmokingBan':
                      return &lt;FaSmokingBan className=&quot;service-icon-home&quot; /&gt;
                  case 'FaCocktail':
                      return &lt;FaCocktail className=&quot;service-icon-home&quot; /&gt;
                  case 'FaPaw':
                      return &lt;FaPaw className=&quot;service-icon-home&quot; /&gt;
                  case 'FaCar':
                      return &lt;FaCar className=&quot;service-icon-home&quot; /&gt;
                  case 'FaConciergeBell':
                      return &lt;FaConciergeBell className=&quot;service-icon-home&quot; /&gt;
                  case 'FaDumbbell':
                      return &lt;FaDumbbell className=&quot;service-icon-home&quot; /&gt;
                  case 'FaSpa':
                      return &lt;FaSpa className=&quot;service-icon-home&quot; /&gt;
                  case 'FaTv':
                      return &lt;FaTv className=&quot;service-icon-home&quot; /&gt;
              }
          }
      };
  
      if (page === &quot;home&quot;) {
          return (
              &lt;ul className=&quot;services-icons&quot;&gt;
                  {productCharacteristics.map((characteristic) =&gt; (
                      &lt;li className=&quot;service-icon&quot; key={characteristic.id}&gt;
                          {parseIcons(characteristic.icon)}
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          )
      } else {
          return (
              &lt;ul className=&quot;services&quot;&gt;
                  {productCharacteristics.map((characteristic) =&gt; (
                      &lt;li className=&quot;service&quot; key={characteristic.id}&gt;
                          {parseIcons(characteristic.icon)}
                          &lt;span&gt;{characteristic.name}&lt;/span&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          );
      };
  };
  
  export default Characteristics;
  </code></pre>
  <p>The test in jest for render list of characteristics is</p>
  <pre><code>import React from 'react'
  import {screen, render, within} from '@testing-library/react'
  
  import Characteristics from './Characteristics'
  
  beforeEach(() =&gt; render(&lt;Characteristics /&gt;));
  
  describe('Test for Characteristics', () =&gt; {
      test('Render list of characteristics&quot;', () =&gt; {
          const list = screen.getByRole(&quot;list&quot;, {
              name: &quot;&quot;,
          })
          const {getAllByRole} = within(list)
          const items = getAllByRole(&quot;listitem&quot;)
          expect(items.length).toBe(13)
      });
  });
  </code></pre>
  <p>The error in this line <code>{productCharacteristics.map((characteristic)</code> and console is:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>