test: migrate suspense test to e2e for react 19/canary

Author: promer94

.github/workflows/test-canary.yml

@@ -19,6 +19,8 @@ jobs:
         run: corepack pnpm upgrade react@canary react-dom@canary use-sync-external-store@canary
 
       - name: Lint and test
+        env:
+          TEST_REACT_CANARY: 1
         run: |
           pnpm clean
           pnpm build

Suspense-tests-todo.md

@@ -1,26 +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)
-- [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
-- [ ] 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
+- [x] test/use-swr-infinite.test.tsx — should update the getKey reference with the suspense mode (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render fallback (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render multiple SWR fallbacks (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should work for non-promises (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should throw errors (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render cached data with error (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should not fetch when cached data is present and `revalidateIfStale` is false (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should pause when key changes (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render correctly when key changes (but with same response data) (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render correctly when key changes (from null to valid key) (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should render initial data if set (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should avoid unnecessary re-renders (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should return `undefined` data for falsy key (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-suspense.test.tsx — should only render fallback once when `keepPreviousData` is set to true (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-streaming-ssr.test.tsx — should match the ssr result when streaming and partially hydrating (covered in e2e/test/streaming-partial-hydration.test.ts)
+- [x] test/use-swr-fetcher.test.tsx — should use the latest fetcher reference with the suspense mode when the key has been changed (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-infinite-preload.test.tsx — preload the fetcher function with the suspense mode (covered in e2e/test/suspense-scenarios.test.ts)
+- [x] test/use-swr-infinite-preload.test.tsx — avoid suspense waterfall by prefetching the resources (covered in e2e/test/preload-scenarios.test.ts)
+- [x] test/use-swr-server.test.tsx — should enable the IS_SERVER flag - suspense on server without fallback (covered in e2e/test/server-suspense.test.ts)
+- [x] test/use-swr-promise.test.tsx — should suspend when resolving the fallback promise (covered in e2e/test/promise-scenarios.test.ts)
+- [x] test/use-swr-promise.test.tsx — should handle errors with fallback promises (covered in e2e/test/promise-scenarios.test.ts)
+- [x] test/use-swr-promise.test.tsx — should handle same fallback promise that is already pending (covered in e2e/test/promise-scenarios.test.ts)
+- [x] test/use-swr-preload.test.tsx — preload the fetcher function (covered in e2e/test/preload-scenarios.test.ts) with the suspense mode
+- [x] test/use-swr-preload.test.tsx — avoid suspense waterfall by prefetching the resources (covered in e2e/test/preload-scenarios.test.ts)

e2e/site/app/render-preload-avoid-waterfall/page.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import useSWR, { preload } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const keyA = 'render-preload-avoid-waterfall:a'
+const keyB = 'render-preload-avoid-waterfall:b'
+const delay = 200
+
+async function fetcherA() {
+  await sleep(delay)
+  return 'foo'
+}
+
+async function fetcherB() {
+  await sleep(delay)
+  return 'bar'
+}
+
+function Preload({ children }: { children?: React.ReactNode }) {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    preload(keyA, fetcherA)
+    preload(keyB, fetcherB)
+    setReady(true)
+  }, [])
+
+  return ready ? <>{children}</> : null
+}
+
+function Content() {
+  const { data: first } = useSWR(keyA, fetcherA, { suspense: true })
+  const { data: second } = useSWR(keyB, fetcherB, { suspense: true })
+
+  useEffect(() => {
+    if (!first || !second) {
+      return
+    }
+  }, [first, second])
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="data">
+        data:{first}:{second}
+      </div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Preload>
+        <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
+          <Content />
+        </Suspense>
+      </Preload>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-preload-basic/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import useSWR, { preload } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-preload-basic'
+let fetchCount = 0
+
+async function fetcher() {
+  await sleep(100)
+  fetchCount += 1
+  return 'foo'
+}
+
+function Preload({ children }: { children?: React.ReactNode }) {
+  const [isPreloaded, setIsPreloaded] = useState(false)
+
+  useEffect(() => {
+    preload(key, fetcher)
+    setIsPreloaded(true)
+  }, [])
+  return <>{isPreloaded ? children : null}</>
+}
+
+export default function Page() {
+  const { data } = useSWR(key, fetcher)
+  const [count, setCount] = useState(fetchCount)
+
+  useEffect(() => {
+    setCount(fetchCount)
+  }, [data])
+
+  return (
+    <OnlyRenderInClient>
+      <Preload>
+        <Suspense fallback={<div>Loading...</div>}>
+          <div style={{ display: 'grid', gap: '0.5rem' }}>
+            <div data-testid="data">data:{data ?? ''}</div>
+            <div data-testid="fetch-count">fetches: {count}</div>
+          </div>
+        </Suspense>
+      </Preload>
+    </OnlyRenderInClient>
+  )
+}

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

@@ -0,0 +1,46 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-promise-suspense-error'
+const fallbackDelay = 150
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() =>
+    sleep(fallbackDelay).then(() => {
+      throw new Error('error')
+    })
+  )
+
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Content() {
+  const { data } = useSWR<string>(key)
+  return <div data-testid="data">data:{data ?? 'undefined'}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <ErrorBoundary
+          fallbackRender={({ error }) => (
+            <div data-testid="error">{error.message}</div>
+          )}
+        >
+          <Suspense fallback={<div data-testid="fallback">loading</div>}>
+            <Content />
+          </Suspense>
+        </ErrorBoundary>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

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

@@ -0,0 +1,51 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+import { useDebugHistory } from '~/lib/use-debug-history'
+
+const key = 'render-promise-suspense-resolve'
+const fallbackDelay = 150
+const fetchDelay = 200
+
+async function fetcher() {
+  await sleep(fetchDelay)
+  return 'new data'
+}
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() =>
+    sleep(fallbackDelay).then(() => 'initial data')
+  )
+
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Content() {
+  const { data } = useSWR(key, fetcher)
+  const historyRef = useDebugHistory(data, 'history:')
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="data">data:{data ?? 'undefined'}</div>
+      <div data-testid="history" ref={historyRef}></div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <Suspense fallback={<div data-testid="fallback">loading</div>}>
+          <Content />
+        </Suspense>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

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

@@ -0,0 +1,36 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-promise-suspense-shared'
+const fallbackDelay = 150
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() => sleep(fallbackDelay).then(() => 'value'))
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Item({ id }: { id: string }) {
+  const { data } = useSWR<string>(key)
+  return <div data-testid={`data-${id}`}>data:{data ?? 'undefined'}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <Suspense fallback={<div data-testid="fallback">loading</div>}>
+          <div style={{ display: 'grid', gap: '0.5rem' }}>
+            <Item id="first" />
+            <Item id="second" />
+          </div>
+        </Suspense>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-suspense-avoid-rerender/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Suspense, useRef } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+async function fetchValue() {
+  await sleep(150)
+  return 'SWR'
+}
+
+function Section() {
+  const startCountRef = useRef(0)
+  const dataCountRef = useRef(0)
+  const prevDataRef = useRef<any>(Symbol('initial'))
+
+  startCountRef.current += 1
+
+  const { data } = useSWR('render-suspense-avoid-rerender', fetchValue, {
+    suspense: true
+  })
+
+  if (data !== prevDataRef.current) {
+    if (data !== undefined) {
+      dataCountRef.current += 1
+    }
+    prevDataRef.current = data
+  }
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="start-count">
+        start renders: {startCountRef.current}
+      </div>
+      <div data-testid="data-count">data renders: {dataCountRef.current}</div>
+      <div data-testid="data">{data}</div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Suspense fallback={<div data-testid="fallback">fallback</div>}>
+        <Section />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
+}