test: test action returning components (#503)

Author: hi-ogawa

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

@@ -671,6 +671,19 @@ test("ReactDom.useFormStatus", async ({ page }) => {
   await page.getByText("pending: false").click();
 });
 
+test("action returning component", async ({ page }) => {
+  await page.goto("/test/action");
+  await waitForHydration(page);
+  await page
+    .getByTestId("action-return-component")
+    .getByRole("button", { name: "Action" })
+    .click();
+  await page.getByText("[server] Loading...").click();
+  await page.getByRole("button", { name: "[client] counter: 0" }).click();
+  await page.getByRole("button", { name: "[client] counter: 1" }).click();
+  await page.getByText("[server] OK!").click();
+});
+
 test("use client > virtual module", async ({ page }) => {
   await page.goto("/test/deps");
   await page.getByText("TestVirtualUseClient").click();

packages/react-server/examples/basic/src/routes/test/action/_action2.tsx

@@ -0,0 +1,26 @@
+"use server";
+
+import { sleep } from "@hiogawa/utils";
+import React from "react";
+import { TestClientComponent } from "./_client2";
+
+export async function actionReturnComponent() {
+  return (
+    <>
+      <div>
+        <TestClientComponent />
+      </div>
+      <div className="border px-2">
+        [server]{" "}
+        <React.Suspense fallback={"Loading..."}>
+          <TestServerComponent />
+        </React.Suspense>
+      </div>
+    </>
+  );
+}
+
+async function TestServerComponent() {
+  await sleep(1000);
+  return <>OK!</>;
+}

packages/react-server/examples/basic/src/routes/test/action/_client.tsx

@@ -12,6 +12,7 @@ import {
   nonFormAction,
   slowAction,
 } from "./_action";
+import { actionReturnComponent } from "./_action2";
 
 export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
   // cf. https://react.dev/reference/react/useOptimistic#optimistically-updating-with-forms
@@ -203,3 +204,25 @@ function formDataToJson(data: FormData) {
   });
   return result;
 }
+
+export function TestActionReturnComponent() {
+  const [node, setNode] = React.useState<React.ReactNode>(null);
+  return (
+    <div
+      className="flex flex-col gap-2 items-start"
+      data-testid="action-return-component"
+    >
+      <h3 className="font-bold">TestActionReturnComponent</h3>
+      <div className="flex items-center gap-2">
+        <form
+          action={async () => {
+            setNode(await actionReturnComponent());
+          }}
+        >
+          <button className="antd-btn antd-btn-default px-2">Action</button>
+        </form>
+        Result: {node ?? "(none)"}
+      </div>
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/action/_client2.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+export function TestClientComponent() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <button
+      className="antd-btn antd-btn-default px-2"
+      onClick={() => setCount((c) => c + 1)}
+    >
+      [client] counter: {count}
+    </button>
+  );
+}

packages/react-server/examples/basic/src/routes/test/action/page.tsx

@@ -11,6 +11,7 @@ import {
   ClientActionBindTest,
   FormStateTest,
   NonFormActionTest,
+  TestActionReturnComponent,
 } from "./_client";
 
 export default async function Page() {
@@ -29,6 +30,7 @@ export default async function Page() {
         <div data-testid="action-bind">{getActionBindResult()}</div>
       </div>
       <FormStateTest />
+      <TestActionReturnComponent />
     </div>
   );
 }