Merge pull request #285 from seamapi/test-with-query

Test DeviceTable loads data

Author: razor-x

src/lib/seam/components/DeviceTable/DeviceTable.test.tsx

@@ -4,5 +4,5 @@ import { DeviceTable } from './DeviceTable.js'
 
 test('DeviceTable', async () => {
   render(<DeviceTable />)
-  await screen.findByText('...')
+  await screen.findByText('Front Door')
 })

src/lib/seam/use-seam-client.ts

@@ -39,6 +39,7 @@ export function useSeamClient(): {
       if (clientSessionToken != null) {
         return new Seam({
           ...clientOptions,
+          apiKey: undefined,
           clientSessionToken,
         })
       }
@@ -61,6 +62,7 @@ export function useSeamClient(): {
 
       return new Seam({
         ...clientOptions,
+        apiKey: undefined,
         clientSessionToken: res.client_session.token,
       })
     },

test/fixtures/react.tsx

@@ -1,4 +1,5 @@
 import { SeamProvider } from '@seamapi/react'
+import { QueryClient } from '@tanstack/react-query'
 import { render } from '@testing-library/react'
 import type { PropsWithChildren } from 'react'
 
@@ -13,26 +14,45 @@ declare global {
   var JEST_SEAM_CLIENT_SESSION_TOKEN_2: string
 }
 
-function Providers({ children }: PropsWithChildren): JSX.Element {
-  return (
-    <SeamProvider
-      endpoint={globalThis.JEST_SEAM_ENDPOINT}
-      publishableKey={globalThis.JEST_SEAM_PUBLISHABLE_KEY_1}
-      userIdentifierKey='some_user'
-      disableCssInjection
-      disableFontInjection
-    >
-      {children}
-    </SeamProvider>
-  )
-}
-
 type Render = typeof render
 
 const customRender = (
   ui: Parameters<Render>[0],
   options?: Parameters<Render>[1]
-): ReturnType<Render> => render(ui, { wrapper: Providers, ...options })
+): ReturnType<Render> => {
+  const queryClient = createQueryClient()
+  const Providers = createProviders({ queryClient })
+  return render(ui, { wrapper: Providers, ...options })
+}
+
+const createQueryClient = (): QueryClient =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        // UPSTREAM: Prevent "Jest did not exit one second after the test run completed" error message.
+        // https://tanstack.com/query/v4/docs/react/guides/testing#set-cachetime-to-infinity-with-jest
+        cacheTime: Infinity,
+      },
+    },
+  })
+
+const createProviders = ({ queryClient }: { queryClient: QueryClient }) => {
+  return function Providers({ children }: PropsWithChildren): JSX.Element {
+    return (
+      <SeamProvider
+        queryClient={queryClient}
+        endpoint={globalThis.JEST_SEAM_ENDPOINT}
+        publishableKey={globalThis.JEST_SEAM_PUBLISHABLE_KEY_1}
+        userIdentifierKey='some_user'
+        disableCssInjection
+        disableFontInjection
+      >
+        {children}
+      </SeamProvider>
+    )
+  }
+}
 
 // eslint-disable-next-line import/export
 export * from '@testing-library/react'