Unhandled Promise Rejection Warning- React, Jest, and Enzyme

(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 --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 10)

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.

import React from 'react';
import DirectoryArea from './directoryArea.js';
    
import { shallow } from 'enzyme';
    
it('renders without crashing', () => {
    shallow(<DirectoryArea/>);
});

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.

Here is the code for the directory area

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) => {
                if(this.loaded) {
                    switch(res.status) {
                        case 200:
                            res.json()
                                .then((res) => {
                                    for(let i = 0; i < 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 < this.info.length; i++) {
            this.areas[this.info[i]] = [];
        }
    
        for(let i = 0; i < data.length; i++) {
            let singleArea = data[i]['AreaName'].split("| ");
            for(let j = 0; j < singleArea.length; j++) {
                this.areas[singleArea[j]].push(
                    <Link key={i + " " + j}
                        to={`/directory/u/${data[i]['AccountID']}`}
                        className={style.imageContainer}
                    >
                        <Image
                            photo={data[i]['Photo']}
                            photoType={data[i]['PhotoType']}
                            name={data[i]['FirstName'] + " " + data[i]['LastName']}
                        />
                    </Link>
                );
            }
        }
        this.htmlLoaded = true;
    }
    
    render() {
        if(!this.props.photosLoaded || !this.state.areasLoaded) {
            return (
                <span className={style.icon}>
                    <FontAwesomeIcon icon="spinner" pulse/>
                </span>
            );
        }
        if(this.props.photosLoaded && this.state.areasLoaded && !this.htmlLoaded) {
            this.generateHtml(this.props.data);
        }
        return(
            <div>
                {Object.entries(this.areas).map(([key, value]) => {
                    return(
                        <div key={key} className={style.photo}>
                            <h5 className={style.header}>{key}</h5>
                            {value}
                        </div>
                    );
                 })}
            </div>
        );
    }
}