test(react-server): test component hmr

examples/react-server/e2e/basic.test.ts

@@ -19,6 +19,57 @@ test("client-component", async ({ page }) => {
   await page.getByTestId("client-component").getByText("Count: 1").click();
 });
 
+test("client hmr @dev", async ({ page }) => {
+  usePageErrorChecker(page);
+  await page.goto("/");
+  await waitForHydration(page);
+
+  await using editor = await createEditor("src/routes/_client.tsx");
+  await using _ = await createReloadChecker(page);
+
+  await page.getByRole("heading", { name: "Hello Client Component" }).click();
+  await editor.edit((s) =>
+    s.replace("Hello Client Component", "Hello [EDIT] Client Component"),
+  );
+  await page
+    .getByRole("heading", { name: "Hello [EDIT] Client Component" })
+    .click();
+});
+
+test("server hmr @dev", async ({ page }) => {
+  usePageErrorChecker(page);
+  await page.goto("/");
+  await waitForHydration(page);
+
+  await using editor = await createEditor("src/routes/page.tsx");
+  await using _ = await createReloadChecker(page);
+
+  await page.getByRole("heading", { name: "Hello Server Component" }).click();
+  await editor.edit((s) =>
+    s.replace("Hello Server Component", "Hello [EDIT] Server Component"),
+  );
+  await page
+    .getByRole("heading", { name: "Hello [EDIT] Server Component" })
+    .click();
+});
+
+test("shared hmr @dev", async ({ page }) => {
+  usePageErrorChecker(page);
+  await page.goto("/");
+  await waitForHydration(page);
+
+  await using editor = await createEditor("src/routes/_shared.tsx");
+  await using _ = await createReloadChecker(page);
+
+  await page.getByText("Shared Component (server)").click();
+  await page.getByText("Shared Component (client)").click();
+  await editor.edit((s) =>
+    s.replace("Shared Component", "Shared [EDIT] Component"),
+  );
+  await page.getByText("Shared [EDIT] Component (server)").click();
+  await page.getByText("Shared [EDIT] Component (client)").click();
+});
+
 test("server-action @js", async ({ page }) => {
   usePageErrorChecker(page);
   await page.goto("/");

examples/react-server/e2e/helper.ts

@@ -1,4 +1,5 @@
 import fs from "fs";
+import { sleep } from "@hiogawa/utils";
 import { type Page, expect, test } from "@playwright/test";
 
 export const testNoJs = test.extend({
@@ -44,6 +45,7 @@ export async function createReloadChecker(page: Page) {
   }
 
   async function check() {
+    await sleep(300);
     await expect(page.locator(`meta[name="x-reload-check"]`)).toBeAttached({
       timeout: 1,
     });

examples/react-server/src/__snapshots__/basic.test.tsx.snap

@@ -19,6 +19,11 @@ exports[`basic 1`] = `
       <h4>
         Hello Server Component
       </h4>
+      <div>
+        Shared Component (
+        server
+        )
+      </div>
       <div
         data-testid="server-action"
       >
@@ -77,6 +82,11 @@ exports[`basic 1`] = `
         <h4>
           Hello Client Component
         </h4>
+        <div>
+          Shared Component (
+          client
+          )
+        </div>
         <div
           data-hydrated="true"
         >

examples/react-server/src/routes/_client.css

@@ -2,6 +2,7 @@
 
 .client-btn {
   background-color: rgb(255, 220, 220);
+  cursor: pointer;
   font-size: 1rem;
   font-family: inherit;
   border: none;

examples/react-server/src/routes/_client.tsx

@@ -3,6 +3,7 @@
 import "./_client.css";
 import React from "react";
 import { checkAnswer } from "./_action";
+import { SharedComponent } from "./_shared";
 
 export function ClientComponent() {
   const [count, setCount] = React.useState(0);
@@ -15,6 +16,7 @@ export function ClientComponent() {
   return (
     <div data-testid="client-component">
       <h4>Hello Client Component</h4>
+      <SharedComponent message="client" />
       <div data-hydrated={hydrated}>hydrated: {String(hydrated)}</div>
       <div>Count: {count}</div>
       <button className="client-btn" onClick={() => setCount((v) => v - 1)}>

examples/react-server/src/routes/_server.css

@@ -2,6 +2,7 @@
 
 .server-btn {
   background-color: rgb(220, 220, 255);
+  cursor: pointer;
   font-size: 1rem;
   font-family: inherit;
   border: none;

examples/react-server/src/routes/_shared.tsx

@@ -0,0 +1,3 @@
+export function SharedComponent(props: { message: string }) {
+  return <div>Shared Component ({props.message})</div>;
+}

examples/react-server/src/routes/page.tsx

@@ -1,6 +1,7 @@
 import "./_server.css";
 import { changeCounter, getCounter } from "./_action";
 import { ClientComponent, UseActionStateDemo } from "./_client";
+import { SharedComponent } from "./_shared";
 
 export default async function Layout() {
   return (
@@ -24,6 +25,7 @@ async function Page() {
   return (
     <div>
       <h4>Hello Server Component</h4>
+      <SharedComponent message="server" />
       <ServerActionDemo />
       <ClientComponent />
     </div>