test: e2e

Author: hi-ogawa

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

@@ -415,7 +415,7 @@ function defineTest(f: Fixture) {
       await page.getByRole('button', { name: 'client-counter: 0' }).click()
     })
 
-    test('non-boundary client hmr', async ({ page }) => {
+    test('non-client-reference client hmr', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)
 
@@ -437,6 +437,38 @@ function defineTest(f: Fixture) {
       await expect(locator).toHaveText('test-hmr-client-dep: 0[ok]')
     })
 
+    test('non-self-accepting client hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+
+      const locator = page.getByTestId('test-hmr-client-dep2')
+      await expect(locator).toHaveText('test-hmr-client-dep2: 0[ok]')
+      await locator.locator('button').click()
+      await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok]')
+
+      const editor = f.createEditor('src/routes/hmr-client-dep2/client-dep.ts')
+      editor.edit((s) => s.replace('[ok]', '[ok-edit]'))
+      await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok-edit]')
+
+      // check next rsc payload includes an updated client reference and preserves state
+      await page.locator("a[href='?test-hmr-client-dep2-re-render']").click()
+      await expect(
+        page.locator("a[href='?test-hmr-client-dep2-re-render']"),
+      ).toHaveText('re-render [ok]')
+      await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok-edit]')
+
+      // check next ssr is updated
+      const res = await page.request.get(f.url(), {
+        headers: {
+          accept: 'text/html',
+        },
+      })
+      expect(await res?.text()).toContain('[ok-edit]')
+
+      editor.reset()
+      await expect(locator).toHaveText('test-hmr-client-dep2: 1[ok]')
+    })
+
     test('server hmr', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)

packages/plugin-rsc/examples/basic/src/routes/hmr-client-dep2/client.tsx

@@ -3,14 +3,22 @@
 import React from 'react'
 import { clientDep } from './client-dep'
 
-export function TestHmrClientDep2() {
+export function TestHmrClientDep2(props: { url: Pick<URL, 'search'> }) {
   const [count, setCount] = React.useState(0)
   return (
-    <div data-testid="test-hmr-client-dep2">
-      <button onClick={() => setCount((c) => c + 1)}>
-        test-hmr-client-dep2: {count}
-      </button>
-      {clientDep()} <a href="?test-hmr-client-dep2-re-render">re-render</a>
+    <div>
+      <span data-testid="test-hmr-client-dep2">
+        <button onClick={() => setCount((c) => c + 1)}>
+          test-hmr-client-dep2: {count}
+        </button>
+        {clientDep()}
+      </span>{' '}
+      <a href="?test-hmr-client-dep2-re-render">
+        re-render
+        {props.url.search.includes('test-hmr-client-dep2-re-render')
+          ? ' [ok]'
+          : ''}
+      </a>
     </div>
   )
 }

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

@@ -65,7 +65,7 @@ export function Root(props: { url: URL }) {
         <TestDepCssInServer />
         <TestHydrationMismatch url={props.url} />
         <TestHmrClientDep />
-        <TestHmrClientDep2 />
+        <TestHmrClientDep2 url={{ search: props.url.search }} />
         <TestHmrSharedServer />
         <TestHmrSharedClient />
         <TestHmrSharedAtomic />