react-query#QueryClientProvider JavaScript Examples

AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );
}

Root = (props) => {
  const { Component, pageProps } = props;
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <Toaster />
    </QueryClientProvider>
  );
}

App = () => {
  return (
    <Suspense fallback={<Waiter message={"Loading…"} />}>
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <Router>
            <MainRoute />
          </Router>
        </QueryClientProvider>
      </RecoilRoot>
      <ToastContainer
        position="top-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div id="panel-container" />
      <div id="modal-container" />
    </Suspense>
  );
}

function IdenaApp(props) {
  const router = useRouter()

  const id = useRef(uuidv4())

  useEffect(() => {
    ReactGA.initialize('UA-139651161-3')
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  useEffect(() => {
    TagManager.initialize({gtmId: 'GTM-P4K5GX4'})
  }, [])

  useEffect(() => {
    const handleRouteChange = url => {
      ReactGA.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return ['/certificate/[id]', '/too-many-tabs'].includes(router.pathname) ? (
    <QueryClientProvider client={queryClient}>
      <Box {...props} />
    </QueryClientProvider>
  ) : (
    <AppProviders tabId={id.current} {...props} />
  )
}

// eslint-disable-next-line react/prop-types
function AppProviders({tabId, ...props}) {
  return (
    <QueryClientProvider client={queryClient}>
      <SettingsProvider>
        <AuthProvider>
          <TestValidationProvider>
            <EpochProvider>
              <IdentityProvider>
                <AppProvider tabId={tabId}>
                  <Flips />
                  <OnboardingProvider>
                    <NotificationProvider {...props} />
                  </OnboardingProvider>
                </AppProvider>
              </IdentityProvider>
            </EpochProvider>
          </TestValidationProvider>
        </AuthProvider>
      </SettingsProvider>
    </QueryClientProvider>
  )
}

DynamicCovInce = props => {
  const queryClient = React.useRef(new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnmount: false,
        refetchOnReconnect: false,
        staleTime: twentyFourHoursInMs * 100
      }
    }
  }))

  return (
    <QueryClientProvider client={queryClient.current}>
      <DynamicUI {...props} />
    </QueryClientProvider>
  )
}

CovInce = ({
  data_url = './data',
  tiles_url = './tiles/Local_Authority_Districts__December_2019__Boundaries_UK_BUC.json',
  config_url = `${data_url}/config.json`,
  trustedQueryParamOrigins,
  api,
  ...props
}) => {
  const queryClient = useRef(new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnmount: false,
        refetchOnReconnect: false,
        staleTime: twentyFourHoursInMs * 100
      }
    }
  }))

  return (
    <QueryClientProvider client={queryClient.current}>
      <DataProvider
        default_data_url={data_url}
        default_tiles_url={tiles_url}
        default_config_url={config_url}
        trustedOrigins={trustedQueryParamOrigins}
        apiImpl={api}
      >
        <UI {...props} />
      </DataProvider>
    </QueryClientProvider>
  )
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppStateProvider>
        <WalletProvider>
          <HashRouter>
            <Main
              assetsUrl="./public/aragon-ui"
              layout={false}
              scrollView={false}
              theme={theme}
            >
              <GlobalErrorHandler>
                <MainView>
                  {/* <AppLoader> */}
                  <Routes />
                  {/* </AppLoader> */}
                </MainView>
              </GlobalErrorHandler>
            </Main>
          </HashRouter>
        </WalletProvider>
      </AppStateProvider>
    </QueryClientProvider>
  )
}

function MyApp ({ Component, pageProps }) {
  // ChunkLoadErrors happen when someone has the app loaded, then we deploy a
  // new release, and the user's app points to previous chunks that no longer exist
  useEffect(() => {
    window.addEventListener('error', (e) => {
      console.log(e)
      if (/Loading chunk [\d]+ failed/.test(e.message)) {
        window.location.reload()
      }
    })
  }, [])

  return (
    <ErrorBoundary>
      <JotaiProvider>
        <QueryClientProvider client={queryClient}>
          <InitPoolTogetherHooks>
            <ThemeContextProvider>
              <Layout>
                <CustomErrorBoundary>
                  <Component {...pageProps} />
                </CustomErrorBoundary>
              </Layout>
            </ThemeContextProvider>
          </InitPoolTogetherHooks>
        </QueryClientProvider>
      </JotaiProvider>
    </ErrorBoundary>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <QueryClientProvider client={queryClient}>
        <AppRoute />
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root'),
);

createQueryWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );

  return wrapper;
}

describe('Delete Activation Key Confirmation Modal', () => {
  const activationKeyName = 'Test Modal';
  it('renders correctly', () => {
    const props = {
      handleModalToggle: jest.fn(),
      isOpen: true,
      name: activationKeyName,
    };
    render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <DeleteActivationKeyConfirmationModal {...props} />
        </QueryClientProvider>
      </Provider>
    );
    expect(screen.getByText(activationKeyName)).toBeInTheDocument();
    expect(screen.getByText('Delete Activation Key?')).toBeInTheDocument();
  });
});

describe('Create Activation Key Modal', () => {
  it('renders correctly', () => {
    const props = { handleModalToggle: jest.fn(), isOpen: true };
    render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <CreateActivationKeyModal {...props} />
        </QueryClientProvider>
      </Provider>
    );
    /**
     * document.body needed because the modal
     * does not render within the container
     *
     */
    expect(document.body).toMatchSnapshot();
  });
});

function MyApp({ Component, pageProps }) {
  // ChunkLoadErrors happen when someone has the app loaded, then we deploy a
  // new release, and the user's app points to previous chunks that no longer exist
  useEffect(() => {
    window.addEventListener('error', (e) => {
      console.log(e)
      if (/Loading chunk [\d]+ failed/.test(e.message)) {
        window.location.reload()
      }
    })
  }, [])

  return (
    <ErrorBoundary>
      <JotaiProvider>
        <QueryClientProvider client={queryClient}>
          <InitPoolTogetherHooks>
            <Layout>
              <CustomErrorBoundary>
                <Component {...pageProps} />
              </CustomErrorBoundary>
            </Layout>
          </InitPoolTogetherHooks>
        </QueryClientProvider>
      </JotaiProvider>
    </ErrorBoundary>
  )
}

PageContainer = () => (
  <QueryClientProvider client={queryClient}>
    <Authentication>
      <Provider store={init().getStore()}>
        <Router>
          <ActivationKeys />
        </Router>
      </Provider>
    </Authentication>
  </QueryClientProvider>
)

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YAMLConfigContextProvider>
        <FormContextProvider>
          <ScriptCallHistoryContextProvider>
            <SidePanel />
            <Index />
          </ScriptCallHistoryContextProvider>
        </FormContextProvider>
      </YAMLConfigContextProvider>
    </QueryClientProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={preset}>
        <BrowserRouter>
          <App />
          <ReactQueryDevtools  position="bottom-right" />
        </BrowserRouter>
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

storiesOf('Getting Started', module)
  .addParameters({
    component: Table,
    subcomponents: {
      Header,
      HeaderRow,
      Body,
      Row,
      HeaderCell,
      Cell,
    },
  })
  .add('Demo', () => {
    return (
      <QueryClientProvider client={queryClient}>
        <Demo />
      </QueryClientProvider>
    );
  });

App = ({
  Component,
  pageProps
}) => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <CssBaseline />
        <Provider
          // Provider options are not required but can be useful in situations where
          // you have a short session maxAge time. Shown here with default values.
          options={{
            // Client Max Age controls how often the useSession in the client should
            // contact the server to sync the session state. Value in seconds.
            // e.g.
            // * 0  - Disabled (always use cache value)
            // * 60 - Sync session state with server if it's older than 60 seconds
            clientMaxAge: 0,
            // Keep Alive tells windows / tabs that are signed in to keep sending
            // a keep alive request (which extends the current session expiry) to
            // prevent sessions in open windows from expiring. Value in seconds.
            //
            // Note: If a session has expired when keep alive is triggered, all open
            // windows / tabs will be updated to reflect the user is signed out.
            keepAlive: 0
          }}
          session={pageProps.session}>
          <QueryClientProvider client={queryClient}>
            <MuiPickersUtilsProvider utils={MomentUtils}>
              <Component {...pageProps} />
            </MuiPickersUtilsProvider>
          </QueryClientProvider>
        </Provider>
      </ThemeProvider>
    </>
  );
}

function MyApp({ Component, pageProps, router }) {
  const { i18n } = useTranslation()

  useEffect(() => {
    const fathomSiteId = process.env.NEXT_JS_FATHOM_SITE_ID

    if (fathomSiteId) {
      Fathom.load(process.env.NEXT_JS_FATHOM_SITE_ID, {
        url: 'https://goose.pooltogether.com/script.js',
        includedDomains: ['vote.pooltogether.com']
      })

      function onRouteChangeComplete(url) {
        if (window['fathom']) {
          window['fathom'].trackPageview()
        }
      }

      router.events.on('routeChangeComplete', onRouteChangeComplete)

      return () => {
        router.events.off('routeChangeComplete', onRouteChangeComplete)
      }
    }
  }, [])

  useEffect(() => {
    const handleExitComplete = () => {
      if (typeof window !== 'undefined') {
        // window.scrollTo({ top: 0 })

        // make sure opacity gets set back to 1 after page transitions!
        setTimeout(() => {
          const elem = document.getElementById('content-animation-wrapper')

          // in case the animation failed
          if (elem) {
            elem.style.opacity = '1'
          }
        }, 1000)
      }
    }

    router.events.on('routeChangeComplete', handleExitComplete)
    return () => {
      router.events.off('routeChangeComplete', handleExitComplete)
    }
  }, [])

  return (
    <Provider>
      <QueryClientProvider client={queryClient}>
        <InitPoolTogetherHooks>
          <BodyClasses />

          <ToastContainer className='pool-toast' position='top-center' autoClose={7000} />

          <SocialDataFetcher />

          <AllContextProviders>
            <CustomErrorBoundary>
              <TransactionStatusChecker />

              <TxRefetchListener />
              <LoadingScreen isInitialized={i18n.isInitialized}>
                <Component {...pageProps} />
              </LoadingScreen>

              <ReactQueryDevtools />
            </CustomErrorBoundary>
          </AllContextProviders>
        </InitPoolTogetherHooks>
      </QueryClientProvider>
    </Provider>
  )
}

App = () => {
  const selectedFilePath = useStore(state => state.selectedFilePath)
  const initialTableHeight = useStore(state => state.initialTableHeight)
  const hasSelectedFilePath = selectedFilePath !== null
  const element = React.useMemo(
    () => document.querySelector(APP_MOUNT_SELECTOR),
    []
  )
  useHideElementWhileMounted(element)

  return (
    <QueryClientProvider client={queryClient}>
      <div
        css={{
          display: 'grid',
          gridTemplateColumns: hasSelectedFilePath ? 'auto 1fr' : '1fr',
          gridTemplateAreas: hasSelectedFilePath ? '"tree preview"' : '"tree"',
          minHeight: Math.min(initialTableHeight, window.innerHeight * 0.8),
        }}
      >
        <div
          css={{
            gridArea: 'tree',
            overflowY: 'auto',
            overflowBehavior: 'contain',
            maxHeight: '85vh',
          }}
        >
          <RepoFileTree />
        </div>

        {hasSelectedFilePath && (
          <div
            ref={element => {
              if (element) {
                element.scrollTop = 0
              }
            }}
            css={{
              gridArea: 'preview',
              borderLeft: '1px solid var(--color-border-primary)',
              overflowY: 'auto',
              overflowBehavior: 'contain',
              maxHeight: '85vh',
            }}
          >
            <Preview path={selectedFilePath} />
          </div>
        )}
      </div>

      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

App = () => {

  const title = useStore((state) => state.title)
  const subtitle = useStore((state) => state.subtitle)
  const [setTitle, setSubtitle] = useStore((state) => [state.setTitle, state.setSubtitle])

  const location = useLocation()

  useEffect(() => {
    if (location.pathname === '/~bukp00/sp2/') {
      if (title !== 'Orienteering Live Results') {
        setTitle('Orienteering Live Results')
        setSubtitle('')
      }
    }
  }, [location, title, setTitle, setSubtitle])

  return (
    <QueryClientProvider client={queryClient}>
      <Layout>
        <Layout.Header className="header">
          <h2 className="title">{title}</h2>
          <h4 className="subtitle">{subtitle}</h4>
          <div className="settings">
            <Settings />
          </div>
        </Layout.Header>
        <Layout.Content>
          <Routes>
            <Route path="/~bukp00/sp2/" element={<RaceSelect />} />
            <Route path="/~bukp00/sp2/:id" element={<Competition />} />
          </Routes>
        </Layout.Content>
        <Layout.Footer>
          <Footer />
        </Layout.Footer>
      </Layout>
    </QueryClientProvider>
  );
}

export default function FirebaseProvider(props) {
    const { value, children } = props;
    return (
        <Context.Provider value={value}>
            <QueryClientProvider client={client}>{children}</QueryClientProvider>
        </Context.Provider>
    );
}

function App() {
  const queryClient = new QueryClient()

  return (
    <>
      <header>
        <Navbar />
      </header>
      <main className="container flex-grow p-4 mx-auto">
        <QueryClientProvider client={queryClient}>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/category">
              <ScreenCategoryList />
            </Route>
            <Route path="/category/edit/:id">
              <ScreenCategoryForm />
            </Route>
            <Route path="/category/create">
              <ScreenCategoryForm />
            </Route>
            <Route exact path="/author">
              <ScreenAuthorList />
            </Route>
            <Route path="/author/edit/:id">
              <ScreenAuthorForm />
            </Route>
            <Route path="/author/create">
              <ScreenAuthorForm />
            </Route>
            <Route exact path="/book">
              <ScreenBookList />
            </Route>
            <Route path="/book/edit/:id">
              <ScreenBookForm />
            </Route>
            <Route path="/book/detail/:id">
              <ScreenBookDetail />
            </Route>
            <Route path="/book/create">
              <ScreenBookForm />
            </Route>
            <Route path="/login">
              <ScreenLogin />
            </Route>
            <Route path="/join">
              <ScreenJoin />
            </Route>
            <Route component={NotFound} />
          </Switch>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </main>
      <Footer />
    </>
  )
}

Table = () => (
  <QueryClientProvider client={queryClient}>
    <ActivationKeysTable actions={actions} />
  </QueryClientProvider>
)

App = () => {
  const { getRegistry } = useContext(RegistryContext);
  const history = useHistory();
  useEffect(() => {
    getRegistry().register({ notifications: notificationsReducer });
  }, [getRegistry]);

  const appNavClick = useMemo(
    () => ({
      settings(redirect) {
        insights?.chrome?.appNavClick({ id: 'settings', redirect });
      },
      activationKeys(redirect) {
        insights?.chrome?.appNavClick({ id: 'activationKeys', redirect });
      },
    }),
    []
  );

  useEffect(() => {
    insights.chrome.init();
    insights.chrome.identifyApp('connector');
    const unregister = insights.chrome.on('APP_NAVIGATION', (event) => {
      if (event.domEvent) {
        history.push(`/${event.navId}`);
        appNavClick[event.navId] !== undefined
          ? appNavClick[event.navId](true)
          : appNavClick.settings(true);
      }
    });
    return () => unregister();
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <NotificationsPortal />
      <NotificationProvider>
        <Notifications />
        <Routes />
      </NotificationProvider>
    </QueryClientProvider>
  );
}

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const router = useRouter();

  if (router.asPath.slice(0, 5) === "/auth") {
    return (
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    );
  }

  return (
    <>
     <Head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta
          name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
        />
        <meta name="description" content="Ticket management system selfhosted open source" />
        <meta name="keywords" content="Keywords" />
        <title>Peppermint</title>

        {/* <link rel="manifest" href="/manifest.json" /> */}
        
        <link
          href="/favicon/favicon.ico"
          rel="icon"
        />
        <link
          href="/favicon/favicon-16x16.png"
          rel="icon"
          type="image/png"
          sizes="16x16"
        />
        <link
          href="/favicon/favicon-32x32.png"
          rel="icon"
          type="image/png"
          sizes="32x32"
        />
        <link rel="apple-touch-icon" href="/apple-icon.png"></link>
        <meta name="theme-color" content="#317EFB" />
      </Head>
      <SessionProvider session={session}>
        <QueryClientProvider client={queryClient}>
          <Auth>
            <SideLayout>
              <Component {...pageProps} />
            </SideLayout>
          </Auth>
        </QueryClientProvider>
      </SessionProvider>
    </>
  );
}

function App() {
  // Init analytics
  useEffect(() => {
    const init = async () => {
      const shouldLog = isLegitPath(window.location.pathname);
      shouldLog && (await analytics.pageview(HOSTNAME, window.location.pathname + window.location.search, document.title));
    };

    history.listen(async (location, action) => {
      try {
        setTimeout(async () => {
          const shouldLog = isLegitPath(location.pathname);
          shouldLog && (await analytics.pageview(HOSTNAME, location.pathname + location.search, document.title));
        }, 100);
      } catch (error) {
        console.log(error);
      }
    });

    init();
  }, []);

  const isLegitPath = (pathname) => {
    const firstPath = pathname.split("/")[1];
    return legitPaths.includes(firstPath) || firstPath === "";
  };

  return (
    <IntlProvider locale="en">
      <Router history={history}>
        <HelmetProvider>
          <QueryClientProvider client={queryClient}>
            <CustomSnackbarProvider>
              <AsyncTaskProvider>
                <PriceProvider>
                  <SettingsProvider>
                    <WalletProvider>
                      <TransactionModalProvider>
                        <PasswordConfirmationModalProvider>
                          <CertificateProvider>
                            <LocalNoteProvider>
                              <AkashProvider>
                                <TemplatesProvider>
                                  <Helmet defaultTitle="Akashlytics Deploy" titleTemplate="Akashlytics Deploy - %s" />

                                  <AppSettingsContainer />
                                </TemplatesProvider>
                              </AkashProvider>
                            </LocalNoteProvider>
                          </CertificateProvider>
                        </PasswordConfirmationModalProvider>
                      </TransactionModalProvider>
                    </WalletProvider>
                  </SettingsProvider>
                </PriceProvider>
              </AsyncTaskProvider>
            </CustomSnackbarProvider>
          </QueryClientProvider>
        </HelmetProvider>
      </Router>
    </IntlProvider>
  );
}

describe('Activation Key Form', () => {
  beforeEach(() => {
    useSystemPurposeAttributes.mockReturnValue({
      isLoading: false,
      error: false,
      data: {
        roles: ['role'],
        serviceLevel: ['serviceLevel'],
        usage: ['usage'],
      },
    });
  });

  it('renders correctly when data is loaded', () => {
    const { container } = render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );
    expect(container).toMatchSnapshot();
  });

  it('validates name field', () => {
    const props = { ...ActivationKeyFormProps };
    const { container } = render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );
    const nameInput = container.querySelector('#activation-key-name');
    fireEvent.change(nameInput, { target: { value: '!123' } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('true');
    fireEvent.change(nameInput, { target: { value: '123Abc#' } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('true');
    fireEvent.change(nameInput, { target: { value: '-Abc_123' } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('false');
  });

  it('validates name length', () => {
    const props = { ...ActivationKeyFormProps };
    const { container } = render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );
    const validLength = Array(256).join('a');
    const invalidLength = Array(257).join('b');
    const nameInput = container.querySelector('#activation-key-name');
    fireEvent.change(nameInput, { target: { value: invalidLength } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('true');
    fireEvent.change(nameInput, { target: { value: validLength } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('false');
    fireEvent.change(nameInput, { target: { value: '' } });
    expect(nameInput.getAttribute('aria-invalid')).toBe('true');
  });

  it('disables submit button when editing if no changes were made', () => {
    const activationKey = {
      name: 'test',
      usage: 'test',
      serviceLevel: 'test',
      role: 'test',
    };
    const props = {
      ...ActivationKeyFormProps,
      activationKey: activationKey,
    };
    render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );
    const submitButton = screen.getByTestId('activation-key-submit-button');
    expect(submitButton).toBeDisabled();
  });

  it('calls submitForm if form is valid', () => {
    const props = { ...ActivationKeyFormProps };

    const { container } = render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );
    const form = container.querySelector('#activation-key-form');
    const nameInput = container.querySelector('#activation-key-name');
    fireEvent.change(nameInput, { target: { value: 'abc-123' } });
    fireEvent.submit(form);
    expect(submitForm).toHaveBeenCalled();
  });

  it('closes the create activation key modal on success', async () => {
    const props = { ...ActivationKeyFormProps, isSuccess: true };

    render(
      <Provider store={registry.getStore()}>
        <QueryClientProvider client={queryClient}>
          <ActivationKeyForm {...props} />
        </QueryClientProvider>
      </Provider>
    );

    expect(handleModalToggle).toHaveBeenCalledTimes(1);
  });
});