MyComponent.spec.js

import { prefetchQuery } from "react-query";

describe('MyComponent', () => {
  beforeEach(() => {
    // using react-query for data fetching makes it easy to mock out your API calls
    return prefetchQuery(["myQuery"], () => [{ name: 'Steve', role: 'Developer' }])
  })
  
  it('should open a dialog', async () => {
    // visit the page
    const page = visit('/mycomponent/steve')
    
    // interact with a button
    const button = await page.findByText("Open Dialog")
    fireEvent.click(button)

    // test your expectations
    const dialog = await page.findByRole("dialog")
    expect(dialog).toHaveTextContent("Hello, Steve the Developer!")
  })
})

test_setup.js

import React from "react";
import { render } from "@testing-library/react";
import { clearQueryCache } from "react-query";
import "@testing-library/jest-dom/extend-expect";
import { AppContext } from "../../src/contexts";

const defaultOptions = {}

global.visit = (path, options = defaultOptions) => {
  return render(
    <AppContext.Provider value={options}>
      <React.Suspense fallback={"Loading..."}>
        <ErrorBoundary>
          <MemoryRouter initialEntries={[path]}>
            <App />
          </MemoryRouter>
        </ErrorBoundary>
      </React.Suspense>
    </AppContext.Provider>
  );
};

afterEach(clearQueryCache);