Merge pull request #284 from mcous/e2e-svelte-5

test(e2e): add simple Svelte 5 suite

Author: sebastianrothe

RELEASE.md

@@ -3,7 +3,6 @@
 1. `pnpm run lint`
 1. `pnpm run toc`
 1. `pnpm run setup`
-1. `pnpm run validate`
 1. Raise Version
 1. `pnpm run build`
 1. `pnpm run release` or with specific version `npx standard-version --release-as 3.0.0`

e2e/README.md

@@ -81,3 +81,13 @@ 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. No special steps were taken to create this suite. It only contains a few components and their associated tests.
+
+### Run the Svelte 5 tests
+
+```shell
+pnpm build
+pnpm e2e:svelte-5
+```

e2e/svelte-5/.npmrc

@@ -0,0 +1 @@
+shell-emulator=true

e2e/svelte-5/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@svelte-jester-e2e/svelte-5",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "pnpm install && NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" jest --coverage --no-cache",
+    "test:watch": "pnpm run test --watch"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "svelte": "^5.0.0-next.139",
+    "svelte-jester": "workspace:*"
+  },
+  "dependenciesMeta": {
+    "svelte-jester": {
+      "injected": true
+    }
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.svelte(?:\\.js)?$": [
+        "svelte-jester"
+      ]
+    },
+    "moduleFileExtensions": [
+      "js",
+      "svelte"
+    ],
+    "extensionsToTreatAsEsm": [
+      ".svelte"
+    ],
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom"
+    ],
+    "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,37 @@
+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).toHaveRole('button')
+})
+
+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,37 @@
+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).toHaveRole('button')
+})
+
+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,22 @@
+import { test } from '@jest/globals'
+
+// TODO(mcous, 2024-05-23): this import fails
+// See https://github.com/svelteness/svelte-jester/pull/283
+// import * as Subject from "./module.svelte.js";
+const Subject = {}
+
+test.skip('get current count', () => {
+  const subject = Subject.createCounter()
+  const result = subject.count
+
+  expect(result).toBe(0)
+})
+
+test.skip('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 {}

e2e/svelte/package.json

@@ -6,7 +6,7 @@
     "build": "rollup -c",
     "dev": "rollup -c -w",
     "start": "sirv public --no-clear",
-    "test": "jest src",
+    "test": "jest src --no-cache",
     "test:watch": "pnpm run test -- --watch"
   },
   "devDependencies": {

e2e/sveltekit/package.json

@@ -8,7 +8,7 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "svelte-kit sync && cross-env NODE_OPTIONS=--experimental-vm-modules jest src --config jest.config.json",
+		"test": "svelte-kit sync && cross-env NODE_OPTIONS=--experimental-vm-modules jest src --config jest.config.json --no-cache",
 		"test:watch": "pnpm run test -- --watch"
 	},
 	"devDependencies": {

package.json

@@ -37,14 +37,15 @@
     "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",
     "setup": "pnpm install && pnpm validate",
-    "validate": "pnpm lint && pnpm test:nocache",
+    "validate": "pnpm lint && pnpm test:nocache && pnpm e2e",
     "release": "standard-version"
   },
   "standard-version": {
@@ -78,7 +79,8 @@
       "jest",
       "it",
       "expect",
-      "describe"
+      "describe",
+      "$state"
     ]
   }
 }