wip

Author: promer94

Suspense-tests-todo.md

@@ -3,8 +3,8 @@
 - [x] test/use-swr-infinite.test.tsx — should update the getKey reference with the suspense mode (migrated to e2e/test/suspense-infinite-get-key.test.ts)
 - [x] test/use-swr-suspense.test.tsx — should render fallback (migrated to e2e/test/suspense-render-fallback.test.ts)
 - [x] test/use-swr-suspense.test.tsx — should render multiple SWR fallbacks (migrated to e2e/test/render-suspense-multiple-fallbacks.test.ts)
-- [ ] test/use-swr-suspense.test.tsx — should work for non-promises
-- [ ] test/use-swr-suspense.test.tsx — should throw errors
+- [x] test/use-swr-suspense.test.tsx — should work for non-promises (migrated to e2e/test/render-suspense-non-promise.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should throw errors (migrated to e2e/test/render-suspense-error.test.ts)
 - [ ] test/use-swr-suspense.test.tsx — should render cached data with error
 - [ ] test/use-swr-suspense.test.tsx — should not fetch when cached data is present and `revalidateIfStale` is false
 - [ ] test/use-swr-suspense.test.tsx — should pause when key changes

e2e/site/app/render-suspense-error/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Suspense } from 'react'
+import useSWR from 'swr'
+import { ErrorBoundary } from 'react-error-boundary'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+function delay(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function fetchWithError(): Promise<string> {
+  await delay(120)
+  throw new Error('error')
+}
+
+function Section() {
+  const { data } = useSWR('render-suspense-error', fetchWithError, {
+    suspense: true
+  })
+
+  return <div data-testid="data">{data}</div>
+}
+
+function ErrorFallback(_: { error: Error; resetErrorBoundary: () => void }) {
+  return <div data-testid="error">error boundary</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <Suspense fallback={<div data-testid="fallback">fallback</div>}>
+          <Section />
+        </Suspense>
+      </ErrorBoundary>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-suspense-non-promise/page.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { Suspense } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+function Section() {
+  const { data } = useSWR('render-suspense-non-promise', () => 'hello', {
+    suspense: true
+  })
+
+  return <div data-testid="data">{data}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Suspense fallback={<div data-testid="fallback">fallback</div>}>
+        <Section />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
+}

e2e/test/render-suspense-error.test.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('render-suspense-error', () => {
+  test('surfaces boundary error after suspense fallback', async ({ page }) => {
+    await page.goto('./render-suspense-error', { waitUntil: 'commit' })
+
+    await expect(page.getByTestId('fallback')).toBeVisible()
+    await expect(page.getByTestId('error')).toBeVisible()
+  })
+})

e2e/test/render-suspense-non-promise.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('render-suspense-non-promise', () => {
+  test('renders synchronously resolved data without showing fallback', async ({
+    page
+  }) => {
+    await page.goto('./render-suspense-non-promise', { waitUntil: 'commit' })
+
+    await expect(page.getByTestId('fallback')).toHaveCount(0)
+    await expect(page.getByTestId('data')).toHaveText('hello')
+  })
+})