feat: Added tests for reactify() outside a SvelteKit app

bfanger · bfanger · commit c04f0df8a69b · 2025-01-31T11:00:42.000+01:00
E2E tests for #49
diff --git a/playwright/tests/react-html.test.ts b/playwright/tests/react-html.test.ts
@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+test.use({ viewport: { width: 480, height: 360 } });
+test.describe("react.html", () => {
+  test("should render the reactified Svelte component inside a React app", async ({
+    page,
+  }) => {
+    await page.goto("/react.html");
+    await expect(page.getByText("Scooby")).toBeVisible();
+    await expect(page.locator("body")).toHaveScreenshot();
+  });
+});
diff --git a/playwright/tests/react-html.test.ts-snapshots/react-html-should-render-the-reactified-Svelte-component-inside-a-React-app-1-darwin.png b/playwright/tests/react-html.test.ts-snapshots/react-html-should-render-the-reactified-Svelte-component-inside-a-React-app-1-darwin.png
diff --git a/playwright/tests/ssr.test.ts b/playwright/tests/ssr.test.ts
@@ -18,6 +18,7 @@ test.describe("ssr", () => {
     "/fixtures/RestProps",
     "/fixtures/List",
     "/intrinsic-elements",
+    "/fixtures/Dog",
   ];
 
   test("client-rendered", async ({ page }) => {
diff --git a/playwright/tests/ssr.test.ts-snapshots/ssr-client-rendered-12-darwin.png b/playwright/tests/ssr.test.ts-snapshots/ssr-client-rendered-12-darwin.png
diff --git a/playwright/tests/ssr.test.ts-snapshots/ssr-no-js-server-rendered-12-darwin.png b/playwright/tests/ssr.test.ts-snapshots/ssr-no-js-server-rendered-12-darwin.png
diff --git a/src/lib/reactify.ts b/src/lib/reactify.ts
@@ -80,6 +80,8 @@ export default function reactify<P = any, E = any>(
             reactChildrenRef.current.parentElement !== svelteChildrenRef.current
           ) {
             svelteChildrenRef.current.appendChild(reactChildrenRef.current);
+          } else if (key === undefined) {
+            reactChildrenRef.current.style.display = "contents";
           }
         } else if (svelteChildrenRef.current) {
           svelteChildrenRef.current.innerHTML = "";
diff --git a/src/tests/fixtures/App.tsx b/src/tests/fixtures/App.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { reactify } from "svelte-preprocess-react";
+import DogSvelte from "./Dog.svelte";
+import ChildrenSvelte from "./Children.svelte";
+
+const el = document.querySelector("react-app");
+if (!el) {
+  throw new Error("<react-app> not found");
+}
+const Dog = reactify(DogSvelte);
+const Children = reactify(ChildrenSvelte);
+
+function App() {
+  return (
+    <div>
+      <h1>React app</h1>
+      <Dog name="Scooby doo" />
+      <Children>
+        <div style={{ color: "#0b6a84" }}>
+          React element inside a reactified Svelte component
+        </div>
+      </Children>
+    </div>
+  );
+}
+createRoot(el).render(<App />);
diff --git a/src/tests/fixtures/Children.svelte b/src/tests/fixtures/Children.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+  let { children }: Props = $props();
+</script>
+
+<div class="wrapper">
+  {@render children()}
+</div>
+
+<style>
+  .wrapper {
+    margin: 1rem;
+    padding: 2rem;
+    border: 2px solid #108caf;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+</style>
diff --git a/src/tests/fixtures/Dog.svelte b/src/tests/fixtures/Dog.svelte
@@ -11,3 +11,14 @@
 </script>
 
 <svelte-dog>{name}</svelte-dog>
+
+<style>
+  svelte-dog {
+    display: inline-block;
+    background: #a65c37;
+    color: white;
+    border-radius: 5rem 0 2rem 0;
+    padding: 2rem;
+    border: 4px solid #5dacdb;
+  }
+</style>
diff --git a/static/react.html b/static/react.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React</title>
+    <script type="module" src="@vite/client"></script>
+  </head>
+  <body>
+    <react-app>
+      <h1>Loading...</h1>
+    </react-app>
+    <script type="module" src="src/tests/fixtures/App.tsx"></script>
+  </body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,8 @@ export default function reactify<P = any, E = any>(`
`80`	`80`	`reactChildrenRef.current.parentElement !== svelteChildrenRef.current`
`81`	`81`	`) {`
`82`	`82`	`svelteChildrenRef.current.appendChild(reactChildrenRef.current);`
	`83`	`+ } else if (key === undefined) {`
	`84`	`+ reactChildrenRef.current.style.display = "contents";`
`83`	`85`	`}`
`84`	`86`	`} else if (svelteChildrenRef.current) {`
`85`	`87`	`svelteChildrenRef.current.innerHTML = "";`