good-example.test.js

import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import MyComponent from './MyComponent';

const weirdResponseResultStructure = {
  results: [ // www.example.com/nameOfUrl
    {
      id: 'KS',
      text: 'KS',
      children: [{
        id: 2,
        selected_text: 'some text',
        text: 'some text',
        timezone: 'America/New_York',
      }],
    },
  ]
};

const otherResults = { results: [] }

const setInputs = () => {}

// how to mock fetch:
// https://benjaminjohnson.me/mocking-fetch
const fetchMock = jest 
    .spyOn(global, 'fetch')
    .mockImplementation((url) => {
      if (url.includes('example')) {
        return Promise.resolve({ json: () => Promise.resolve(weirdResponseResultStructure) });
      }
      // else url = /scheduling/data/pets-for-user/${pgrId}
      return Promise.resolve({ json: () => Promise.resolve(otherResults) });
    });

const stuckIn2020 = new Date('2020-01-01').getTime();

describe('MyComponent', () => {
  beforeEach(() => {
    jest.useFakeTimers()
    // .setSystemTime(stuckIn2020); // If you wanted to change the date to 2020.
  })
  // Running all pending timers and switching to real timers using Jest
  afterEach(() => {
    jest.runOnlyPendingTimers()
    jest.useRealTimers()
  })
  
  it('shows details after clicking a timerButton 201 milisecond delay', async () => {
    const {container, getByRole} = render( // {baseComponent, container, getByRole}
        <MyComponent />
      );
    })
    const timerButton = getByRole('button', {name: /StartTimer/i})
    userEvent.click(timerButton)
    await act(async () => {
      jest.advanceTimersByTime(2001); // Because a setTimeout was used in MyComponent.
    })
    expect(container).toMatchSnapshot();
  })
  it('shows details after waiting for text to render', async () => {
    const {container, getByRole} = render( // {baseComponent, container, getByRole}
        <MyComponent />
    );
    const timerButton = getByRole('button', {name: /Feb 2022/i})
    userEvent.click(changeToFeb2022Button)
    await waitFor(() => {
        component.getByText('February 2022')
    })
    expect(component.container.getElementsByClassName('result-box').length).toBe(1);
});

This is my test template
for jest + react-testing-library

I use this template every time I write a new test instead of making from scratch

It features 3 things:

1. fake timers!
2. mocking the fetch implementation
3. userEvents like click ... type ... etc

it also may not be perfect as I wrote it hastily
if something is wrong please leave a comment and I will fix.