migrate test

Author: huozhi

e2e/site/app/concurrent-transition/page.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const TransitionDemo = dynamic(() => import('./transition-demo'), {
+  ssr: false
+})
+
+export default function ConcurrentTransitionPage() {
+  return (
+    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>React 19 Concurrent Transition Test</h1>
+      <p>
+        This page tests SWR&apos;s behavior with React 19 concurrent
+        transitions. When using useTransition, SWR should &quot;pause&quot;
+        loading states to provide smooth UX.
+      </p>
+      <Suspense fallback={<div>Loading page...</div>}>
+        <TransitionDemo />
+      </Suspense>
+    </div>
+  )
+}

e2e/site/app/concurrent-transition/transition-demo.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useState, useTransition, Suspense, useCallback } from 'react'
+import useSWR from 'swr'
+
+// Simulate API data fetching with delay
+const fetcher = async (key: string): Promise<string> => {
+  // Slightly longer delay to make transition behavior more observable
+  await new Promise(resolve => setTimeout(resolve, 150))
+  return key
+}
+
+// Component that uses SWR with suspense
+function DataComponent({ swrKey }: { swrKey: string }) {
+  const { data } = useSWR(swrKey, fetcher, {
+    dedupingInterval: 0,
+    suspense: true,
+    // React 19 improvements for concurrent features
+    keepPreviousData: false
+  })
+
+  return <span data-testid="data-content">data:{data}</span>
+}
+
+export default function TransitionDemo() {
+  const [isPending, startTransition] = useTransition()
+  const [key, setKey] = useState('initial-key')
+
+  const handleTransition = useCallback(() => {
+    startTransition(() => {
+      setKey('new-key')
+    })
+  }, [])
+
+  return (
+    <div>
+      <h2>React 19 Concurrent Transition Demo</h2>
+      <div
+        onClick={handleTransition}
+        data-testid="transition-trigger"
+        style={{
+          cursor: 'pointer',
+          padding: '20px',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          backgroundColor: isPending ? '#f0f0f0' : '#fff'
+        }}
+      >
+        <div data-testid="pending-state">isPending:{isPending ? '1' : '0'}</div>
+        <Suspense
+          fallback={<span data-testid="loading-fallback">loading</span>}
+        >
+          <DataComponent swrKey={key} />
+        </Suspense>
+        <p style={{ fontSize: '12px', color: '#666', marginTop: '10px' }}>
+          Click to test concurrent transition behavior
+        </p>
+      </div>
+    </div>
+  )
+}

e2e/site/app/suspense-retry-18-3/manual-retry.tsx renamed to e2e/site/app/suspense-retry/manual-retry.tsx

@@ -16,6 +16,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "5.1.3",
-    "swr": "*"
+    "swr": "link:../../"
   }
 }

e2e/site/app/suspense-retry-18-3/page.tsx renamed to e2e/site/app/suspense-retry/page.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import { test, expect } from '@playwright/test'
+
+test.describe('concurrent rendering transitions', () => {
+  test('should pause when changing the key inside a transition', async ({
+    page
+  }) => {
+    // Navigate to the test page
+    await page.goto('./concurrent-transition', { waitUntil: 'networkidle' })
+
+    // Wait for page to be fully loaded and interactive
+    await expect(page.getByTestId('pending-state')).toContainText('isPending:0')
+
+    // Wait for initial data to load
+    await expect(page.getByTestId('data-content')).toContainText(
+      'data:initial-key'
+    )
+
+    // Ensure the component is in a stable state before triggering transition
+    await page.waitForTimeout(100)
+
+    // Click to trigger transition
+    await page.getByTestId('transition-trigger').click()
+
+    // Verify transition starts - isPending becomes true
+    await expect(page.getByTestId('pending-state')).toContainText('isPending:1')
+
+    // During transition: data should still show old value (this is the key behavior)
+    // In React 19, this behavior should be more consistent
+    await expect(page.getByTestId('data-content')).toContainText(
+      'data:initial-key'
+    )
+
+    // Wait for transition to complete
+    await expect(page.getByTestId('pending-state')).toContainText('isPending:0')
+    await expect(page.getByTestId('data-content')).toContainText('data:new-key')
+  })
+})

e2e/site/app/suspense-retry-18-3/use-remote-data.ts renamed to e2e/site/app/suspense-retry/use-remote-data.ts

@@ -7,28 +7,32 @@ test.describe('rendering', () => {
     await page.getByRole('button', { name: 'preload' }).click()
     await expect(page.getByText('suspense-after-preload')).toBeVisible()
   })
-  test('should be able to retry in suspense with react 18.3', async ({
+
+  test('should be able to retry in suspense with react 19 (app router)', async ({
     page
   }) => {
-    await page.goto('./suspense-retry-18-3', { waitUntil: 'commit' })
+    await page.goto('./suspense-retry', { waitUntil: 'commit' })
     await expect(page.getByText('Something went wrong')).toBeVisible()
     await page.getByRole('button', { name: 'retry' }).click()
     await expect(page.getByText('data: SWR suspense retry works')).toBeVisible()
   })
-  test('should be able to retry in suspense with react 18.2', async ({
+
+  test('should be able to retry in suspense with react 19 (pages router)', async ({
     page
   }) => {
-    await page.goto('./suspense-retry-18-2', { waitUntil: 'commit' })
+    await page.goto('./suspense-retry-19', { waitUntil: 'commit' })
     await expect(page.getByText('Something went wrong')).toBeVisible()
     await page.getByRole('button', { name: 'retry' }).click()
     await expect(page.getByText('data: SWR suspense retry works')).toBeVisible()
   })
+
   test('should be able to retry in suspense with mutate', async ({ page }) => {
     await page.goto('./suspense-retry-mutate', { waitUntil: 'commit' })
     await expect(page.getByText('Something went wrong')).toBeVisible()
     await page.getByRole('button', { name: 'retry' }).click()
     await expect(page.getByText('data: SWR suspense retry works')).toBeVisible()
   })
+
   test('should be able to use `unstable_serialize` in server component', async ({
     page
   }) => {

e2e/site/package.json

@@ -1,4 +1,4 @@
-import { screen, fireEvent, act } from '@testing-library/react'
+import { screen, act } from '@testing-library/react'
 import {
   createKey,
   createResponse,
@@ -27,49 +27,6 @@ describe('useSWR - concurrent rendering', () => {
     screen.getByText('data:0')
   })
 
-  it.skip('should pause when changing the key inside a transition', async () => {
-    const initialKey = createKey()
-    const newKey = createKey()
-    const fetcher = (k: string) => createResponse(k, { delay: 100 })
-    // eslint-disable-next-line react/prop-types
-    function Component({ swrKey }) {
-      const { data } = useSWR(swrKey, fetcher, {
-        dedupingInterval: 0,
-        suspense: true
-      })
-
-      return <>data:{data}</>
-    }
-    function Page() {
-      const [isPending, startTransition] = React.useTransition()
-      const [key, setKey] = React.useState(initialKey)
-
-      return (
-        <div onClick={() => startTransition(() => setKey(newKey))}>
-          isPending:{isPending ? 1 : 0},
-          <React.Suspense fallback="loading">
-            <Component swrKey={key} />
-          </React.Suspense>
-        </div>
-      )
-    }
-
-    renderWithConfig(<Page />)
-
-    screen.getByText('isPending:0,loading')
-    await act(() => sleep(120))
-    screen.getByText(`isPending:0,data:${initialKey}`)
-    fireEvent.click(screen.getByText(`isPending:0,data:${initialKey}`))
-    await act(() => sleep(10))
-
-    // Pending state
-    screen.getByText(`isPending:1,data:${initialKey}`)
-
-    // Transition end
-    await act(() => sleep(120))
-    screen.getByText(`isPending:0,data:${newKey}`)
-  })
-
   // https://codesandbox.io/s/concurrent-swr-case-ii-lr6x4u
   it.skip('should do state updates in transitions', async () => {
     const key1 = createKey()