test: reactify() types

Author: bfanger

package.json

@@ -75,6 +75,7 @@
     "svelte-check": "^4.1.4",
     "svelte-youtube-lite": "~1.2.1",
     "svelte2tsx": "^0.7.34",
+    "tsd": "^0.31.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import * as React from "react";
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";

src/tests/react-router/Link.spec.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
 import * as React from "react";

src/tests/react-router/NavLink.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import reactify from "../lib/reactify";
+import Dog from "./fixtures/Dog.svelte";
+
+describe("reactify-tsx", () => {
+  const svelte = reactify({ Dog }); // in a tsx file, Dog is of type "any"  :-(
+
+  it("renders the Svelte component output into React", () => {
+    expect(renderToString(<svelte.Dog name="Fido" />)).toMatchInlineSnapshot(
+      `"<reactify-svelte style="display:contents"><!--[--><svelte-dog class="svelte-1n9pbz6">Fido</svelte-dog><!--]--></reactify-svelte>"`,
+    );
+  });
+});

src/tests/reactify-tsx.spec.tsx

@@ -1,26 +1,34 @@
-// @vitest-environment node
-
-import * as React from "react";
-import { renderToString } from "react-dom/server";
 import { describe, expect, it } from "vitest";
+import { expectType } from "tsd";
+import * as React from "react";
 import reactify from "../lib/reactify";
 import Dog from "./fixtures/Dog.svelte";
+import Children from "./fixtures/Children.svelte";
+import { renderToString } from "react-dom/server";
+
+describe("reactify-ts", () => {
+  const svelte = reactify({ Dog, Children });
 
-describe("reactify", () => {
-  const svelte = reactify({ Dog });
-  type ReactProps = React.ComponentProps<typeof svelte.Dog>;
+  it("converts Svelte props into React props", () => {
+    expectType<
+      React.FC<{
+        name: string;
+        onbark?: ((sound: string) => void) | undefined;
+      }>
+    >(svelte.Dog);
+    expectType<React.FC<{ children: React.ReactNode }>>(svelte.Children);
 
-  it("renders a svelte-wrapper", () => {
-    const props: ReactProps = { name: "Fido", onbark() {} };
-    const html = renderToString(React.createElement(svelte.Dog, props));
+    const html = renderToString(
+      React.createElement(svelte.Dog, { name: "Fido" }),
+    );
     expect(html).toMatchInlineSnapshot(
       `"<reactify-svelte style="display:contents"><!--[--><svelte-dog class="svelte-1n9pbz6">Fido</svelte-dog><!--]--></reactify-svelte>"`,
     );
   });
-  it("caches the conversion component", () => {
+
+  it("reactify() on the same component returns a identical (cached) react component", () => {
     const DogReact = reactify(Dog);
-    expect(DogReact).toBe(svelte.Dog);
-    const svelte2 = reactify({ Dog });
-    expect(svelte2.Dog === DogReact).toBeTruthy();
+    expect(svelte.Dog === DogReact).toBeTruthy();
+    expectType<typeof svelte.Dog>(DogReact);
   });
 });

src/tests/reactify.spec.ts

@@ -6,7 +6,6 @@ export default defineConfig({
   plugins: [sveltekit()],
   css: { devSourcemap: true },
   test: {
-    environment: "happy-dom",
     exclude: [...configDefaults.exclude, "dist", "playwright"],
   },
   resolve: {