Testing Mock Async Deta Fetching in React Components with useEffect and useState

Question

I have a component that fetches some data in useEffect and sets state with the response using useState functions. This seems like a pretty idiomatic pattern but I'm not having much luck figuring out how to test it. In this case, QuarantineApi.getQuarantinedFileLogs returns a promise that resolves to an array of the data I need. and that's what I'd like to mock; The underlying implementation (axios or fetch) should not matter.

import React, {useEffect, useState} from 'react'
import {FormGroup, Input, Label, Table} from 'reactstrap'
import {QuarantinedFileLog} from '../QuarantinedFileLog'
import {DeleteQuarantinedFileButton} from './DeleteQuarantinedFileButton'
import {DownloadQuarantinedFileButton} from './DownloadQuarantinedFileButton'
import {UploadQuarantinedFileButton} from './UploadQuarantinedFileButton'
import QuarantineApi from '../../../api/QuarantineApi'
// @ts-ignore
import {GMTLoadingIndicator} from '@gmt/coreui-react'
interface IQuarantinedFilesListProps {
}
export const QuarantinedFilesList = (props: IQuarantinedFilesListProps) => {
  const {getQuarantinedFileLogs} = QuarantineApi
  const [loading, setLoading] = useState(true)
  const [quarantinedFiles, setQuarantinedFiles] = useState<QuarantinedFileLog[]>([])
  const [quarantineServiceError, setQuarantineServiceError] = useState<string|null>(null)
  useEffect(() => {
    getQuarantinedFileLogs().then(
      (returnedQuarantinedFileLogs) => {
        setQuarantinedFiles(returnedQuarantinedFileLogs)
        setLoading(false)
      }
    ).catch(
      error => {
        setQuarantineServiceError(`There was a problem getting quarantined files ${error}`)
        setLoading(false)
      }
    )
  }, [getQuarantinedFileLogs])
  return (
    <>
      {quarantineServiceError && (
        <div className="alert alert-danger" role="alert">
          {quarantineServiceError}
        </div>
      )}
      {loading && <GMTLoadingIndicator />}
      {!loading && !quarantinedFiles.length && (
        <p>No quarantined files</p>
      )}
      {!loading && !!quarantinedFiles.length && (
        <Table>
          <thead>
          <tr>
            <th></th>
            <th>Filename</th>
            <th>Time</th>
            <th>Error</th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody>
          {quarantinedFiles.map(quarantinedFileLog => {
            return (
              <tr key={quarantinedFileLog.id}>
                <td>
                  <FormGroup check>
                    <Input type="checkbox" name="check" id="exampleCheck" />
                  </FormGroup>
                </td>
                <td>
                  <Label for="exampleCheck" check>{quarantinedFileLog.fileName}</Label>
                </td>
                <td>Date time</td>
                <td>{quarantinedFileLog.errorReason}</td>
                <td>
                  <DeleteQuarantinedFileButton
                    fileName={quarantinedFileLog.fileName}
                  />
                  <span className="ml-2">
                <DownloadQuarantinedFileButton />
              </span>
                  <span className="ml-2">
                <UploadQuarantinedFileButton />
              </span>
                </td>
              </tr>
            )
          })}
          </tbody>
        </Table>
      )}
    </>
  )
}

This is the closest example I've found to what I'm trying to accomplish here (adapted to my code from this Stack Overflow post):

import renderer, { act } from 'react-test-renderer'
import {QuarantinedFilesList} from '../QuarantinedFilesList'
import React from 'react'
import {QuarantinedFileLog} from '../QuarantinedFileLog'
import QuarantineApi from '../../../api/QuarantineApi'

describe('QuarantinedFilesList', () => {
    it('renders correctly', async () => {
        const quarantinedFileLogs: QuarantinedFileLog[] = [
            {
                id: 1,
                fileName: 'file 1',
                errorReason: 'error 1',
                queueName: 'queue 1'
            },
            {
                id: 2,
                fileName: 'file 2',
                errorReason: 'error 2',
                queueName: 'queue 2'
            },
            {
                id: 3,
                fileName: 'file 3',
                errorReason: 'error 3',
                queueName: 'queue 3'
            }
        ]

        const quarantineApiSpy = jest.spyOn(QuarantineApi, 'getQuarantinedFileLogs')
            .mockResolvedValueOnce(quarantinedFileLogs)

        let component

        await act(async () => {
            component = renderer.create(<QuarantinedFilesList />)
        })

        expect(quarantineApiSpy).toBeCalled()
        expect(component.toJSON()).toMatchSnapshot()
    })
})

The error I'm getting is TypeError: Cannot read property 'get' of undefined from elsewhere in the app which doesn't happen if I don't mock the response.