title: Unhandled Promise Rejection Warning- React, Jest, and Enzyme
body: <blockquote>
  <p>(node:480) UnhandledPromiseRejectionWarning: FetchError: invalid json response body at  reason: Unexpected end of JSON input
  (node:480) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag <code>--unhandled-rejections=strict</code> (see <a href="https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode" rel="nofollow noreferrer">https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode</a>). (rejection id: 10)</p>
  </blockquote>
  <p>I get these for several of my tests but not all, all the tests are just checking to see if the components render. I have looked all over here and trying to implement different things but I still get the same warnings.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import DirectoryArea from './directoryArea.js';
      
  import { shallow } from 'enzyme';
      
  it('renders without crashing', () =&gt; {
      shallow(&lt;DirectoryArea/&gt;);
  });
  </code></pre>
  <p>All the tests are written in this way but with different components. How can I fix the warning so it doesn't show up? I've added the CLI flag to the tests script but that doesn't help either.</p>
  <p>Here is the code for the directory area</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
      
  import { api } from '../../constants';
  import { request } from '../../utilities';
  import { Image } from './helper.js';
      
  import style from './directory.module.css';
      
  export default class DirectoryArea extends Component {
      constructor(props) {
          super(props);
      
          this.state = {
              areasLoaded: false,
              error: false,
          };
      
          this.loaded = false;
          this.htmlLoaded = false;
          this.info = [];
          this.areas = {};
      }
      
      componentDidMount() {
          this.loaded = true;
          request(api(`directory/areas`), 'GET')
              .then((res) =&gt; {
                  if(this.loaded) {
                      switch(res.status) {
                          case 200:
                              res.json()
                                  .then((res) =&gt; {
                                      for(let i = 0; i &lt; res.length; i++) {
                                          this.info.push(res[i]['AreaName']);
                                      }
                                      this.setState({ areasLoaded: true });
                                  });
                              break;
                          default:
                              this.setState({ error: true, });
                      }
                  }
              });
      }
      
      componentWillUnmount() {
          this.loaded = false;
      }
      
      generateHtml(data) {
          for(let i = 0; i &lt; this.info.length; i++) {
              this.areas[this.info[i]] = [];
          }
      
          for(let i = 0; i &lt; data.length; i++) {
              let singleArea = data[i]['AreaName'].split(&quot;| &quot;);
              for(let j = 0; j &lt; singleArea.length; j++) {
                  this.areas[singleArea[j]].push(
                      &lt;Link key={i + &quot; &quot; + j}
                          to={`/directory/u/${data[i]['AccountID']}`}
                          className={style.imageContainer}
                      &gt;
                          &lt;Image
                              photo={data[i]['Photo']}
                              photoType={data[i]['PhotoType']}
                              name={data[i]['FirstName'] + &quot; &quot; + data[i]['LastName']}
                          /&gt;
                      &lt;/Link&gt;
                  );
              }
          }
          this.htmlLoaded = true;
      }
      
      render() {
          if(!this.props.photosLoaded || !this.state.areasLoaded) {
              return (
                  &lt;span className={style.icon}&gt;
                      &lt;FontAwesomeIcon icon=&quot;spinner&quot; pulse/&gt;
                  &lt;/span&gt;
              );
          }
          if(this.props.photosLoaded &amp;&amp; this.state.areasLoaded &amp;&amp; !this.htmlLoaded) {
              this.generateHtml(this.props.data);
          }
          return(
              &lt;div&gt;
                  {Object.entries(this.areas).map(([key, value]) =&gt; {
                      return(
                          &lt;div key={key} className={style.photo}&gt;
                              &lt;h5 className={style.header}&gt;{key}&lt;/h5&gt;
                              {value}
                          &lt;/div&gt;
                      );
                   })}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>