custom-render.tsx 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  2. import { render, renderHook, type RenderOptions } from '@testing-library/react'
  3. import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
  4. import { TooltipProvider } from 'ui'
  5. import { CommandProvider } from 'ui-patterns/CommandMenu'
  6. // End of third-party imports
  7. import { ProfileContext, type ProfileContextType } from '@/lib/profile'
  8. type AdapterProps = Partial<Parameters<typeof NuqsTestingAdapter>[0]>
  9. const CustomWrapper = ({
  10. children,
  11. queryClient,
  12. nuqs,
  13. profileContext,
  14. }: {
  15. children: React.ReactNode
  16. queryClient?: QueryClient
  17. nuqs?: AdapterProps
  18. profileContext?: ProfileContextType
  19. }) => {
  20. const _queryClient =
  21. queryClient ??
  22. new QueryClient({
  23. defaultOptions: {
  24. queries: {
  25. retry: false,
  26. },
  27. },
  28. })
  29. const content = (
  30. <QueryClientProvider client={_queryClient}>
  31. <NuqsTestingAdapter {...nuqs}>
  32. <TooltipProvider>
  33. <CommandProvider openKey="">{children}</CommandProvider>
  34. </TooltipProvider>
  35. </NuqsTestingAdapter>
  36. </QueryClientProvider>
  37. )
  38. return profileContext ? (
  39. <ProfileContext.Provider value={profileContext}>{content}</ProfileContext.Provider>
  40. ) : (
  41. content
  42. )
  43. }
  44. type CustomRenderOpts = RenderOptions & {
  45. queryClient?: QueryClient
  46. nuqs?: AdapterProps
  47. profileContext?: ProfileContextType
  48. }
  49. export const customRender = (component: React.ReactElement, renderOptions?: CustomRenderOpts) => {
  50. return render(component, {
  51. wrapper: ({ children }) =>
  52. CustomWrapper({
  53. queryClient: renderOptions?.queryClient,
  54. nuqs: renderOptions?.nuqs,
  55. profileContext: renderOptions?.profileContext,
  56. children,
  57. }),
  58. ...renderOptions,
  59. })
  60. }
  61. export const customRenderHook = (hook: () => any, renderOptions?: CustomRenderOpts) => {
  62. return renderHook(hook, {
  63. wrapper: ({ children }) =>
  64. CustomWrapper({
  65. children,
  66. queryClient: renderOptions?.queryClient,
  67. nuqs: renderOptions?.nuqs,
  68. profileContext: renderOptions?.profileContext,
  69. }),
  70. ...renderOptions,
  71. })
  72. }