hi-ogawa · hi-ogawa · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,6 +25,7 @@ jobs:
       - run: pnpm -C examples/react-server test-e2e
       - run: pnpm -C examples/react-server build
       - run: pnpm -C examples/react-server test-e2e-preview
+      - run: pnpm -C examples/react-server test
       - run: pnpm -C examples/vue-ssr test-e2e
       - run: pnpm -C examples/vue-ssr build
       - run: pnpm -C examples/vue-ssr test-e2e-preview

diff --git a/examples/react-server/package.json b/examples/react-server/package.json
@@ -6,6 +6,7 @@
     "dev": "vite",
     "build": "vite build --all",
     "preview": "vite preview",
+    "test": "vitest",
     "test-e2e": "playwright test",
     "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
     "cf-build": "SERVER_ENTRY=/src/adapters/cloudflare-workers.ts pnpm build && bash misc/cloudflare-workers/build.sh",
@@ -20,7 +21,10 @@
   "devDependencies": {
     "@hiogawa/vite-plugin-ssr-middleware-alpha": "workspace:*",
     "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22"
+    "@types/react-dom": "18.2.22",
+    "@types/react-test-renderer": "^18.0.7",
+    "happy-dom": "^14.7.1",
+    "react-test-renderer": "19.0.0-canary-4c12339ce-20240408"
   },
   "volta": {
     "extends": "../../package.json"

diff --git a/examples/react-server/src/__snapshots__/basic.test.tsx.snap b/examples/react-server/src/__snapshots__/basic.test.tsx.snap
@@ -0,0 +1,99 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic 1`] = `
+<body>
+  <div>
+    <h4>
+      Hello Server Component
+    </h4>
+    <div
+      data-testid="server-action"
+    >
+      <h4>
+        Hello Server Action
+      </h4>
+      <form
+        action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+      >
+        <div>
+          Count: 
+          0
+        </div>
+        <button
+          name="value"
+          value="-1"
+        >
+          -1
+        </button>
+        <button
+          name="value"
+          value="1"
+        >
+          +1
+        </button>
+      </form>
+      <form
+        action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+      >
+        <h4>
+          Hello useActionState
+        </h4>
+        <div
+          style="display: flex; align-items: center; gap: 0.3rem;"
+        >
+          <div>
+            1 + 1 = 
+          </div>
+          <input
+            name="answer"
+            placeholder="Answer?"
+            required=""
+          />
+          <div
+            data-testid="action-state"
+          />
+        </div>
+      </form>
+    </div>
+    <div
+      data-testid="client-component"
+    >
+      <h4>
+        Hello Client Component
+      </h4>
+      <div
+        data-hydrated="true"
+      >
+        hydrated: 
+        true
+      </div>
+      <div>
+        Count: 
+        0
+      </div>
+      <button>
+        -1
+      </button>
+      <button>
+        +1
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`test async 1`] = `
+<body>
+  <div>
+    <div>
+      hello
+    </div>
+    <pre>
+      {
+  "name": "@hiogawa/vite-environment-examples-react-server",
+  "private": true,
+  "type": "module"
+    </pre>
+  </div>
+</body>
+`;
diff --git a/examples/react-server/src/basic.test.tsx b/examples/react-server/src/basic.test.tsx
@@ -0,0 +1,59 @@
+import { test, expect, beforeEach, vi } from "vitest";
+import { initializeWebpackBrowser } from "./features/use-client/browser";
+import React from "react";
+import { createManualPromise } from "@hiogawa/utils";
+import reactDomClient from "react-dom/client";
+import { Window } from "happy-dom";
+
+// happy-dom
+beforeEach(() => {
+  const window = new Window({ url: "https://localhost:8080" });
+  Object.assign(globalThis, {
+    window,
+    document: window.document,
+  });
+  return () => {
+    window.close();
+  };
+});
+
+async function testRender(page: string) {
+  // react client browser
+  initializeWebpackBrowser();
+  const { default: reactServerDomClient } = await import(
+    "react-server-dom-webpack/client.browser"
+  );
+
+  // fetch rsc stream via virtual module
+  const testStream = await import("virtual:test-react-server-stream" + page);
+  const testNode =
+    reactServerDomClient.createFromReadableStream<React.ReactNode>(
+      testStream.default,
+    );
+
+  // render
+  const mounted = createManualPromise<void>();
+
+  function Root() {
+    React.useEffect(() => {
+      mounted.resolve();
+    }, []);
+    return React.use(testNode);
+  }
+
+  reactDomClient.createRoot(document.body).render(<Root />);
+  await mounted;
+}
+
+test("basic", async () => {
+  await testRender("/src/routes/page");
+  await vi.waitUntil(() =>
+    document.body.querySelector(`[data-hydrated="true"]`),
+  );
+  expect(document.body).toMatchSnapshot();
+});
+
+test("test async", async () => {
+  await testRender("/src/routes/test/page");
+  expect(document.body).toMatchSnapshot();
+});
diff --git a/examples/react-server/src/entry-react-server.tsx b/examples/react-server/src/entry-react-server.tsx
@@ -35,3 +35,10 @@ export async function handler({
 
   return { stream, actionResult };
 }
+
+export async function testRender(Comp: React.ComponentType) {
+  return reactServerDomServer.renderToReadableStream(
+    <Comp />,
+    createBundlerConfig(),
+  );
+}
diff --git a/examples/react-server/src/features/test/plugin.ts b/examples/react-server/src/features/test/plugin.ts
@@ -0,0 +1,49 @@
+import type { Plugin } from "vite";
+import { $__global } from "../../global";
+
+export function vitePluginTestReactServerStream(): Plugin {
+  const prefix = "virtual:test-react-server-stream/";
+
+  return {
+    name: vitePluginTestReactServerStream.name,
+    resolveId(source, _importer, _options) {
+      if (source.startsWith(prefix)) {
+        return "\0" + source;
+      }
+      return;
+    },
+    async load(id, _options) {
+      if (id.startsWith("\0" + prefix)) {
+        const page = id.slice(prefix.length);
+        this.addWatchFile(page);
+        const stream = await testRender(page);
+        let stringified = "";
+        await stream.pipeThrough(new TextDecoderStream()).pipeTo(
+          new WritableStream({
+            write(chunk) {
+              stringified += chunk;
+            },
+          }),
+        );
+        const code = `
+          export default new ReadableStream({
+            start(controller) {
+              controller.enqueue(${JSON.stringify(stringified)});
+              controller.close();
+            }
+          }).pipeThrough(new TextEncoderStream());
+        `;
+        return code;
+      }
+      return;
+    },
+  };
+}
+
+async function testRender(page: string) {
+  const runner = $__global.reactServerRunner;
+  const entryMod = await runner.import("/src/entry-react-server");
+  const pageMod = await runner.import(page);
+  const stream = entryMod.testRender(pageMod.default);
+  return stream;
+}
diff --git a/examples/react-server/src/features/test/virtual.d.ts b/examples/react-server/src/features/test/virtual.d.ts
@@ -0,0 +1,4 @@
+declare module "virtual:test-react-server-stream/*" {
+  const stream: ReadableStream<Uint8Array>;
+  export default stream;
+}
diff --git a/examples/react-server/src/routes/_client.tsx b/examples/react-server/src/routes/_client.tsx
@@ -14,7 +14,7 @@ export function ClientComponent() {
   return (
     <div data-testid="client-component">
       <h4>Hello Client Component</h4>
-      <div>hydrated: {String(hydrated)}</div>
+      <div data-hydrated={hydrated}>hydrated: {String(hydrated)}</div>
       <div>Count: {count}</div>
       <button onClick={() => setCount((v) => v - 1)}>-1</button>
       <button onClick={() => setCount((v) => v + 1)}>+1</button>

diff --git a/examples/react-server/src/routes/page.tsx b/examples/react-server/src/routes/page.tsx
@@ -1,7 +1,7 @@
 import { changeCounter, getCounter } from "./_action";
 import { ClientComponent, UseActionStateDemo } from "./_client";
 
-export default function Page() {
+export default async function Page() {
   return (
     <div>
       <h4>Hello Server Component</h4>

diff --git a/examples/react-server/src/routes/test/page.tsx b/examples/react-server/src/routes/test/page.tsx
@@ -0,0 +1,11 @@
+import fs from "node:fs";
+
+export default async function Page() {
+  const pkg = await fs.promises.readFile("package.json", "utf-8");
+  return (
+    <div>
+      <div>hello</div>
+      <pre>{pkg.slice(0, 100)}</pre>
+    </div>
+  );
+}
diff --git a/examples/react-server/vite.config.ts b/examples/react-server/vite.config.ts
@@ -18,20 +18,22 @@ import {
 } from "./src/features/utils/plugin";
 import fs from "node:fs";
 import { resolve } from "node:path";
+import { vitePluginTestReactServerStream } from "./src/features/test/plugin";
 
 const debug = createDebug("app");
 
 export default defineConfig((_env) => ({
   clearScreen: false,
   appType: "custom",
   plugins: [
-    react(),
+    !process.env["VITEST"] && react(),
     vitePluginReactServer(),
     vitePluginLogger(),
     vitePluginSsrMiddleware({
       entry: process.env["SERVER_ENTRY"] ?? "/src/adapters/node",
       preview: resolve("./dist/server/index.js"),
     }),
+    !!process.env["VITEST"] && vitePluginTestReactServerStream(),
   ],
 
   environments: {
@@ -57,6 +59,10 @@ export default defineConfig((_env) => ({
       await build(builder.environments["ssr"]!);
     },
   },
+
+  test: {
+    dir: "src",
+  },
 }));
 
 // singleton to pass data through environment build

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "tsx": "^4.7.1",
     "typescript": "^5.4.3",
     "vite": "6.0.0-alpha.3",
+    "vitest": "^1.5.1",
     "wrangler": "^3.48.0"
   },
   "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",