test: simplify

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -1007,40 +1007,16 @@ function defineTest(f: Fixture) {
     )
   })
 
-  test('react cache function', async ({ page }) => {
+  test('React.cache', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
-    const locator = page.getByTestId('test-react-cache-fn')
-
-    // Just verify the functionality exists and works
-    await expect(locator.locator('span')).toContainText('actionCount:')
-    await expect(locator.locator('span')).toContainText('cacheFnCount:')
-
-    // Click button and verify counters update
-    await locator.getByRole('button').click()
-    await expect(locator.locator('span')).toContainText('actionCount:')
-    await expect(locator.locator('span')).toContainText('cacheFnCount:')
-
-    // Test with different argument
-    await locator.getByRole('textbox').fill('test-arg')
-    await locator.getByRole('button').click()
-    await expect(locator.locator('span')).toContainText('actionCount:')
-    await expect(locator.locator('span')).toContainText('cacheFnCount:')
-  })
-
-  test('react cache component', async ({ page }) => {
-    await page.goto(f.url())
-    await waitForHydration(page)
-
-    // Check that the React.cache test components are rendered
-    await expect(page.getByTestId('test-react-cache-component')).toBeVisible()
-    await expect(page.getByTestId('test-react-cache-basic')).toContainText(
-      'React.cache basic test:',
+    await page.getByRole('link', { name: 'test-react-cache' }).click()
+    await expect(page.getByTestId('test-react-cache-result')).toHaveText(
+      '(cacheFnCount = 2, nonCacheFnCount = 3)',
+    )
+    await page.reload()
+    await expect(page.getByTestId('test-react-cache-result')).toHaveText(
+      '(cacheFnCount = 4, nonCacheFnCount = 6)',
     )
-
-    // Check that the async inner component loads
-    await expect(
-      page.getByTestId('test-react-cache-async-inner'),
-    ).toContainText('Async inner: cacheFnCount =')
   })
 }

packages/plugin-rsc/examples/basic/src/routes/react-cache/server.tsx

@@ -1,80 +1,41 @@
 import React from 'react'
 
-export function TestReactCache() {
-  return (
-    <>
-      <TestReactCacheFn />
-      <TestReactCacheComponent />
-    </>
-  )
-}
-
-// Use module-level state but reset it for clean tests
-function resetCounters() {
-  actionCount = 0
-  cacheFnCount = 0
-}
+export async function TestReactCache(props: { url: URL }) {
+  if (props.url.searchParams.has('test-react-cache')) {
+    await Promise.all([
+      testCacheFn('test1'),
+      testCacheFn('test2'),
+      testCacheFn('test1'),
+      testNonCacheFn('test1'),
+      testNonCacheFn('test2'),
+      testNonCacheFn('test1'),
+    ])
+  } else {
+    cacheFnCount = 0
+    nonCacheFnCount = 0
+  }
 
-function TestReactCacheFn() {
   return (
-    <form
-      data-testid="test-react-cache-fn"
-      action={async (formData) => {
-        'use server'
-        const reset = formData.get('reset')
-        if (reset === 'true') {
-          resetCounters()
-          return
-        }
-        actionCount++
-        const argument = formData.get('argument') || 'default'
-        await testCacheFn(argument)
-      }}
-    >
-      <button>test-react-cache-fn</button>
-      <input className="w-25" name="argument" placeholder="argument" />
-      <input type="hidden" name="reset" value="false" />
-      <span>
-        (actionCount: {actionCount}, cacheFnCount: {cacheFnCount})
+    <div data-testid="test-react-cache">
+      <a href="?test-react-cache">test-react-cache</a>{' '}
+      <span data-testid="test-react-cache-result">
+        (cacheFnCount = {cacheFnCount}, nonCacheFnCount = {nonCacheFnCount})
       </span>
-    </form>
+    </div>
   )
 }
 
-let actionCount = 0
 let cacheFnCount = 0
+let nonCacheFnCount = 0
 
-const testCacheFn = React.cache(async (arg: unknown) => {
+const testCacheFn = React.cache(async (...args: unknown[]) => {
+  console.log('[cached:args]', args)
   cacheFnCount++
-  // Simulate async work
   await new Promise((resolve) => setTimeout(resolve, 20))
-  return arg
 })
 
-function TestReactCacheComponent() {
-  // Similar to the external reference, create a simple demonstration
-  const timestamp = new Date().toISOString()
-
-  return (
-    <div data-testid="test-react-cache-component">
-      <div data-testid="test-react-cache-basic">
-        React.cache basic test: {timestamp}
-      </div>
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <TestReactCacheAsyncInner />
-      </React.Suspense>
-    </div>
-  )
-}
-
-async function TestReactCacheAsyncInner() {
-  // Call cached function - in server components React.cache should work within the same request
-  await testCacheFn('constant-arg')
-  await testCacheFn('constant-arg') // Should use cache
-
-  return (
-    <div data-testid="test-react-cache-async-inner">
-      Async inner: cacheFnCount = {cacheFnCount}
-    </div>
-  )
+const testNonCacheFn = async (...args: unknown[]) => {
+  console.log('[not-cached:args]', args)
+  nonCacheFnCount++
+  await new Promise((resolve) => setTimeout(resolve, 20))
 }

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -76,7 +76,7 @@ export function Root(props: { url: URL }) {
         <TestModuleInvalidationServer />
         <TestBrowserOnly />
         <TestUseCache />
-        <TestReactCache />
+        <TestReactCache url={props.url} />
       </body>
     </html>
   )