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

.github/workflows/install/action.yml

@@ -10,10 +10,10 @@ runs:
       shell: bash
       run: pnpm i -g [email protected]
 
-    - name: Use Node.js 18
+    - name: Use Node.js lts
       uses: actions/setup-node@v4
       with:
-        node-version: 20
+        node-version: 22
         cache: pnpm
         registry-url: 'https://registry.npmjs.org'
 

.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

.github/workflows/test-release.yml

@@ -31,7 +31,7 @@ jobs:
   e2e:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.34.3-focal
+      image: mcr.microsoft.com/playwright:v1.55.0-noble
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm lint-staged && pnpm types:check

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>
+  )
+}