wip

Author: promer94

Suspense-tests-todo.md

@@ -0,0 +1,26 @@
+# Suspense Tests To-Do
+
+- [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
+- [ ] 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
+- [ ] test/use-swr-suspense.test.tsx — should render correctly when key changes (but with same response data)
+- [ ] test/use-swr-suspense.test.tsx — should render correctly when key changes (from null to valid key)
+- [ ] test/use-swr-suspense.test.tsx — should render initial data if set
+- [ ] test/use-swr-suspense.test.tsx — should avoid unnecessary re-renders
+- [ ] test/use-swr-suspense.test.tsx — should return `undefined` data for falsy key
+- [ ] test/use-swr-suspense.test.tsx — should only render fallback once when `keepPreviousData` is set to true
+- [ ] test/use-swr-streaming-ssr.test.tsx — should match the ssr result when streaming and partially hydrating (failing)
+- [ ] test/use-swr-fetcher.test.tsx — should use the latest fetcher reference with the suspense mode when the key has been changed
+- [ ] test/use-swr-infinite-preload.test.tsx — preload the fetcher function with the suspense mode
+- [ ] test/use-swr-infinite-preload.test.tsx — avoid suspense waterfall by prefetching the resources (skipped)
+- [ ] test/use-swr-server.test.tsx — should enable the IS_SERVER flag - suspense on server without fallback
+- [ ] test/use-swr-promise.test.tsx — should suspend when resolving the fallback promise
+- [ ] test/use-swr-promise.test.tsx — should handle errors with fallback promises
+- [ ] test/use-swr-promise.test.tsx — should handle same fallback promise that is already pending
+- [ ] test/use-swr-preload.test.tsx — preload the fetcher function with the suspense mode
+- [ ] test/use-swr-preload.test.tsx — avoid suspense waterfall by prefetching the resources

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

@@ -0,0 +1,32 @@
+'use client'
+
+import { Suspense } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+function delay(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function fetchGreeting() {
+  await delay(500)
+  return 'SWR'
+}
+
+function Section() {
+  const { data } = useSWR<string>('render-suspense-fallback', fetchGreeting, {
+    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/site/app/render-suspense-multiple-fallbacks/page.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { Suspense } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+function delay(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function fetchValue(key: string) {
+  if (key === 'render-suspense-multiple-fallbacks-1') {
+    await delay(50)
+    return 1
+  }
+  await delay(140)
+  return 2
+}
+
+function Section() {
+  const { data: v1 } = useSWR<number>(
+    'render-suspense-multiple-fallbacks-1',
+    fetchValue,
+    { suspense: true }
+  )
+  const { data: v2 } = useSWR<number>(
+    'render-suspense-multiple-fallbacks-2',
+    fetchValue,
+    { suspense: true }
+  )
+
+  return <div data-testid="data">{(v1 ?? 0) + (v2 ?? 0)}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Suspense fallback={<div data-testid="fallback">fallback</div>}>
+        <Section />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/suspense-infinite/get-key/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { Suspense, useState } from 'react'
+import useSWRInfinite from 'swr/infinite'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+const DATA: Record<string, string[]> = {
+  'suspense-key-a': ['A1', 'A2', 'A3'],
+  'suspense-key-b': ['B1', 'B2', 'B3']
+}
+
+async function fetchList(key: string) {
+  await new Promise(resolve => setTimeout(resolve, 150))
+  return DATA[key]
+}
+
+function List() {
+  const [status, setStatus] = useState<'a' | 'b'>('a')
+  const { data, setSize } = useSWRInfinite(
+    () => (status === 'a' ? 'suspense-key-a' : 'suspense-key-b'),
+    fetchList,
+    { suspense: true }
+  )
+
+  return (
+    <>
+      <div data-testid="data">data: {String(data)}</div>
+      <button
+        type="button"
+        onClick={() => {
+          setStatus('b')
+          void setSize(1)
+        }}
+      >
+        mutate
+      </button>
+    </>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Suspense fallback={<div>loading</div>}>
+        <List />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/suspense-undefined-key/page.tsx

@@ -2,6 +2,7 @@
 
 import { Suspense, useReducer } from 'react'
 import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
 
 const fetcher = async (key: string) => {
   // Add a small delay to simulate network request
@@ -20,11 +21,11 @@ export default function Page() {
   const [trigger, toggle] = useReducer(x => !x, false)
 
   return (
-    <div>
+    <OnlyRenderInClient>
       <button onClick={toggle}>toggle</button>
       <Suspense fallback={<div>fallback</div>}>
         <Section trigger={trigger} />
       </Suspense>
-    </div>
+    </OnlyRenderInClient>
   )
 }

e2e/site/component/only-render-in-client.tsx

@@ -0,0 +1,18 @@
+'use client'
+import React from 'react'
+
+// This component ensures its children are only rendered on the client side.
+export function OnlyRenderInClient({
+  children
+}: {
+  children?: React.ReactNode
+}) {
+  const [isClient, setIsClient] = React.useState(false)
+  React.useEffect(() => {
+    setIsClient(true)
+  }, [])
+  if (!isClient) {
+    return null
+  }
+  return <>{children}</>
+}

e2e/site/next-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('render-suspense-fallback', () => {
+  test('shows fallback before rendering resolved data', async ({ page }) => {
+    await page.goto('./render-suspense-fallback', { waitUntil: 'commit' })
+
+    await expect(page.getByTestId('fallback')).toBeVisible()
+    await expect(page.getByTestId('data')).toHaveText('SWR')
+  })
+})

e2e/test/render-suspense-multiple-fallbacks.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('render-suspense-multiple-fallbacks', () => {
+  test('keeps showing fallback while multiple resources resolve', async ({
+    page
+  }) => {
+    await page.goto('./render-suspense-multiple-fallbacks', {
+      waitUntil: 'commit'
+    })
+
+    const fallback = page.getByTestId('fallback')
+    await expect(fallback).toBeVisible()
+
+    await page.waitForTimeout(80)
+    await expect(fallback).toBeVisible()
+
+    await page.waitForTimeout(120)
+    await expect(page.getByTestId('data')).toHaveText('3')
+  })
+})

e2e/test/suspense-infinite-get-key.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('suspense infinite get key', () => {
+  test('updates the data when key changes under suspense', async ({ page }) => {
+    await page.goto('./suspense-infinite/get-key', { waitUntil: 'commit' })
+
+    await expect(page.getByTestId('data')).toHaveText('data: A1,A2,A3')
+
+    await page.getByRole('button', { name: 'mutate' }).click()
+
+    await expect(page.getByTestId('data')).toHaveText('data: B1,B2,B3')
+  })
+})