Use async client components

tom-sherman · May 16, 2023 · 9e4aa67 · 9e4aa67
1 parent df4409b
commit 9e4aa67
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 59 deletions.
diff --git a/app/serverRender.ts b/app/serverRender.ts
diff --git a/app/test.tsx b/app/test.tsx
@@ -1,10 +1,19 @@
-import { screen } from '@testing-library/react'
+import { screen, render, waitFor } from '@testing-library/react'
 import Layout from './layout'
 import Page from './page'
-import serverRender from './serverRender'
+import { Suspense } from 'react'
 
-beforeEach(() => serverRender(<Page />, { wrapper: Layout }))
+beforeEach(() =>
+  render(
+    <Suspense fallback={<p>Loading...</p>}>
+      <Layout>
+        <Page />
+      </Layout>
+    </Suspense>
+  )
+)
 
-test.each(['client', 'server', 'layout'])(`%s component`, (keyword) => {
-  expect(screen.getByText(keyword)).toBeInTheDocument()
+test.each(['client', 'server', 'layout'])(`%s component`, async (keyword) => {
+  expect(screen.getByText('Loading...')).toBeInTheDocument()
+  await waitFor(() => expect(screen.getByText(keyword)).toBeInTheDocument())
 })