React Jest testing if button changes screen giving me error

Question

Right now I am designing a list of requests page for a school project. The gist of it is that when the user presses the "Manage Request" Button, a list would show up by changing the useState (either empty or items from a database). Right now I am creating a snapshot test to see if the button changes the screen (in this case the walkRequestInformation function should be called). But the snapshot results are giving me an unhandled promise rejection error. I've been searching online for about two days now, and it's driving me crazy. Any help or suggestions would be nice, I am also using the bootstrap Button, so that might affect it. Below is the code for the page function:

import React, { useState } from "react";
import { Helmet } from 'react-helmet';
import Global from '../utility/Global'
import {Container, Button, Card, CloseButton, Modal} from "react-bootstrap";
import {Ajax} from '../utility/Ajax'
import WalkRequestInformation from "../component/WalkRequest/WalkRequestInformation";

function Admin(props) {
    const [show, setShow] = useState(false)
    const [showDetails, setDetails] = useState(false)
    const [requests, setRequests] = useState([])
    const [request, setRequestDetails] = useState({})

    const showList = () => {
        setShow(!show)
        setDetails(false)
        Ajax.get('requests/',
            (res) => setRequests(res))
    };

    const showRequestDetails = (boolean, request) => {
        setDetails(boolean)
        setRequestDetails(request)
    }

    const closeDetails = () => {
        setDetails(false)
    }

    return (
        <Container>
            <Helmet>
                <title>{Global.TITLE} | Admin Homepage</title>
            </Helmet>
            <h1 className = "title"> Admin </h1>
            <Button 
                id = "requestButton"
                className = "manageButton" 
                onClick ={showList}> 
                    Manage Requests 
            </Button>
            {show &&
                <Card className="requestList mt-5">
                {requests.map((request) =>
                    <WalkRequestInformation requestDetails = {showRequestDetails}
                                            showDetails = {showDetails}
                                            key ={request.id}
                                            startLocation={request.startLocation}
                                            endLocation={request.endLocation}
                                            startTime = {request.startTime}
                                            note = {request.note}/>
            )}
            </Card>}
            <Modal show={showDetails} onHide={closeDetails} centered size="lg">
                <Card>
                    <CloseButton onClick={closeDetails}/>
                    <h2> Start: {request.startLocation} </h2>
                    <h2> End: {request.endLocation} </h2>
                    <h2> Start Time: {new Date(request.startTime).toLocaleString()} </h2>
                    <p> Notes: {request.note} </p>
                </Card>
            </Modal>
        </Container>
    )
}

export default Admin;

and this is the page for the test:

import React from "react";
import renderer from "react-test-renderer";
import {render, fireEvent} from "@testing-library/react";
import Admin from "../page/Admin.jsx";

it("renders correctly", () => {
    const tree = renderer.create(<Admin />).toJSON();
    expect(tree).toMatchSnapshot();
});

test('check manage request button works', async() => {
    try{
        const {getByText} = render(<Admin />);
        const button = getByText(/Manage Requests/i);
        fireEvent.click(button);
        const tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    } catch (e) {
        console.log('caught error', e)
    }
});

and finally here is the error I am getting:

[UnhandledPromiseRejection: 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(). The promise was rejected with the reason "Error: Attempt to refresh an access token without a refresh token".] {code: 'ERR_UNHANDLED_REJECTION'}

EDIT:

so i decided to change my test so that i create a Mock API, i am getting better results, but I'm getting a weird error (not an UnhandledPromiseRejection error). Here is my updated test:

import React from "react";
import renderer from "react-test-renderer";
import {render, fireEvent, waitFor, screen} from "@testing-library/react";
import axiosMock from 'axios'
import Admin from "../page/Admin.jsx";

jest.mock('axios')

it("renders correctly", () => {
    const tree = renderer.create(<Admin />).toJSON();
    expect(tree).toMatchSnapshot();
});

test('Check \'Manage RequestS\' button works', async () => {
    render(<Admin />);
    axiosMock.get.mockResolvedValueOnce({
        data: {
            startLocation: "West Edmonton Mall",
            endLocation: "SouthGate",
            startTime: Date(),
            note: "This is a test",}
    })

    fireEvent.click(screen.getByText('Manage Requests'));

    await waitFor(() => screen.getByTestId('requestList'));

    expect(screen.getByTestId('requestList')).toMatchSnapshot();
});

and here is my new error:

Attempt to refresh access token without a refresh token

  75 |     async refreshToken(debug=false) {
  76 |         if (AuthProvider.Identity.refreshToken === "" || AuthProvider.Identity.refreshToken == null) {
> 77 |             throw Error("Attempt to refresh access token without a refresh token")
     |                   ^
  78 |         }
  79 |
  80 |         await Ajax.postNoRefresh(