test(e2e): add simple Svelte 5 suite

Author: mcous

e2e/README.md

@@ -81,3 +81,17 @@ test('should show the proper label', () => {
 npm run test
 ```
 
+## Svelte 5 (ESM)
+
+A minimal Svelte 5 test to ensure Svelte 5 components and `.svelte.js` modules work with Jest.
+
+### Bootstrapping the project
+
+No special steps were taken to create this suite. It only contains a few components and their associated tests.
+
+### Run the tests
+
+```shell
+pnpm build
+pnpm e2e:svelte-5
+```

e2e/svelte-5/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@svelte-jester-e2e/svelte-5",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules --no-warnings\" jest --coverage",
+    "test:watch": "pnpm run test --watch"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "svelte": "^5.0.0-next.136",
+    "svelte-jester": "workspace:*"
+  },
+  "dependenciesMeta": {
+    "svelte-jester": {
+      "injected": true
+    }
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.svelte(?:\\.js)?$": [
+        "svelte-jester"
+      ]
+    },
+    "moduleFileExtensions": [
+      "js",
+      "svelte"
+    ],
+    "extensionsToTreatAsEsm": [
+      ".svelte"
+    ],
+    "testEnvironment": "jsdom"
+  }
+}

e2e/svelte-5/src/legacy.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+  let showGreeting = false;
+
+  const handleClick = () => (showGreeting = true);
+</script>
+
+<button on:click={handleClick}>greet</button>
+{#if showGreeting}
+  <p>hello {name}</p>
+{/if}

e2e/svelte-5/src/legacy.test.js

@@ -0,0 +1,38 @@
+import { test, afterEach } from "@jest/globals";
+import { mount, unmount, tick } from "svelte";
+
+import Subject from "./legacy.svelte";
+
+let component;
+
+afterEach(() => {
+  unmount(component);
+  component = undefined;
+});
+
+test("render", () => {
+  component = mount(Subject, {
+    target: document.body,
+    props: { name: "alice" },
+  });
+
+  const button = document.querySelector("button");
+
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+});
+
+test("interaction", async () => {
+  component = mount(Subject, {
+    target: document.body,
+    props: { name: "alice" },
+  });
+
+  const button = document.querySelector("button");
+
+  button.click();
+  await tick();
+
+  const message = document.querySelector("p");
+
+  expect(message.textContent).toMatch(/hello alice/iu);
+});

e2e/svelte-5/src/modern.svelte

@@ -0,0 +1,11 @@
+<script>
+  let { name } = $props();
+  let showGreeting = $state(false);
+
+  const handleClick = () => (showGreeting = true);
+</script>
+
+<button onclick={handleClick}>greet</button>
+{#if showGreeting}
+  <p>hello {name}</p>
+{/if}

e2e/svelte-5/src/modern.test.js

@@ -0,0 +1,38 @@
+import { test, afterEach } from "@jest/globals";
+import { mount, unmount, tick } from "svelte";
+
+import Subject from "./modern.svelte";
+
+let component;
+
+afterEach(() => {
+  unmount(component);
+  component = undefined;
+});
+
+test("render", () => {
+  component = mount(Subject, {
+    target: document.body,
+    props: { name: "alice" },
+  });
+
+  const button = document.querySelector("button");
+
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+});
+
+test("interaction", async () => {
+  component = mount(Subject, {
+    target: document.body,
+    props: { name: "alice" },
+  });
+
+  const button = document.querySelector("button");
+
+  button.click();
+  await tick();
+
+  const message = document.querySelector("p");
+
+  expect(message.textContent).toMatch(/hello alice/iu);
+});

e2e/svelte-5/src/module.svelte.js

@@ -0,0 +1,13 @@
+export const createCounter = () => {
+  let count = $state(0);
+
+  return {
+    get count() {
+      return count;
+    },
+
+    increment() {
+      count = count + 1;
+    },
+  };
+};

e2e/svelte-5/src/module.test.js

@@ -0,0 +1,19 @@
+import { test } from "@jest/globals";
+
+import * as Subject from "./module.svelte.js";
+
+test("get current count", () => {
+  const subject = Subject.createCounter();
+  const result = subject.count;
+
+  expect(result).toBe(0);
+});
+
+test("increment", () => {
+  const subject = Subject.createCounter();
+
+  subject.increment();
+  const result = subject.count;
+
+  expect(result).toBe(1);
+});

e2e/svelte-5/svelte.config.js

@@ -0,0 +1 @@
+export default {};

package.json

@@ -37,9 +37,10 @@
     "test": "pnpm test:esm && pnpm test:cjs",
     "test:esm": "pnpm build && cross-env NODE_OPTIONS=--experimental-vm-modules jest src/__tests__/transformer.test.js",
     "test:cjs": "pnpm build && jest src/__tests__/transformer.test.cjs",
-    "e2e": "pnpm e2e:svelte && pnpm e2e:sveltekit",
+    "e2e": "pnpm e2e:svelte && pnpm e2e:sveltekit && pnpm e2e:svelte-5",
     "e2e:svelte": "cd e2e/svelte && pnpm test",
     "e2e:sveltekit": "cd e2e/sveltekit && pnpm test",
+    "e2e:svelte-5": "cd e2e/svelte-5 && pnpm test",
     "test:nocache": "pnpm install && jest --clearCache && pnpm test -- --no-cache",
     "test:watch": "pnpm test -- --watch",
     "test:update": "pnpm test -- --updateSnapshot --coverage",