(async () => {
+ console.log(`After mount`);
+});
diff --git a/tests/components/ct-svelte4/public/favicon.png b/tests/components/ct-svelte4/public/favicon.png
new file mode 100644
index 0000000000..7e6f5eb5a2
Binary files /dev/null and b/tests/components/ct-svelte4/public/favicon.png differ
diff --git a/tests/components/ct-svelte4/public/index.html b/tests/components/ct-svelte4/public/index.html
new file mode 100644
index 0000000000..74558940d0
--- /dev/null
+++ b/tests/components/ct-svelte4/public/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Svelte app
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/components/ct-svelte4/rollup.config.js b/tests/components/ct-svelte4/rollup.config.js
new file mode 100644
index 0000000000..10b425f1fb
--- /dev/null
+++ b/tests/components/ct-svelte4/rollup.config.js
@@ -0,0 +1,121 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+ let server;
+
+ function toExit() {
+ if (server) server.kill(0);
+ }
+
+ return {
+ writeBundle() {
+ if (server) return;
+ server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+ stdio: ['ignore', 'inherit', 'inherit'],
+ shell: true
+ });
+
+ process.on('SIGTERM', toExit);
+ process.on('exit', toExit);
+ }
+ };
+}
+
+const prod = {
+ input: 'src/main.js',
+ output: {
+ sourcemap: true,
+ format: 'iife',
+ name: 'app',
+ file: 'public/build/bundle.js'
+ },
+ plugins: [
+ svelte({
+ compilerOptions: {
+ // enable run-time checks when not in production
+ dev: !production
+ }
+ }),
+ // we'll extract any component CSS out into
+ // a separate file - better for performance
+ css({ output: 'bundle.css' }),
+
+ // If you have external dependencies installed from
+ // npm, you'll most likely need these plugins. In
+ // some cases you'll need additional configuration -
+ // consult the documentation for details:
+ // https://github.com/rollup/plugins/tree/master/packages/commonjs
+ resolve({
+ browser: true,
+ dedupe: ['svelte']
+ }),
+ commonjs(),
+
+ // In dev mode, call `npm run start` once
+ // the bundle has been generated
+ !production && serve(),
+
+ // Watch the `public` directory and refresh the
+ // browser on changes when not in production
+ !production && livereload('public'),
+
+ // If we're building for production (npm run build
+ // instead of npm run dev), minify
+ production && terser()
+ ],
+ watch: {
+ clearScreen: false
+ }
+};
+
+const test = {
+ input: 'src/tests.js',
+ output: {
+ sourcemap: true,
+ format: 'iife',
+ name: 'app',
+ file: 'public/tests/bundle.js'
+ },
+ plugins: [
+ svelte({
+ compilerOptions: {
+ // enable run-time checks when not in production
+ dev: !production
+ }
+ }),
+ // we'll extract any component CSS out into
+ // a separate file - better for performance
+ css({ output: 'bundle.css' }),
+
+ // If you have external dependencies installed from
+ // npm, you'll most likely need these plugins. In
+ // some cases you'll need additional configuration -
+ // consult the documentation for details:
+ // https://github.com/rollup/plugins/tree/master/packages/commonjs
+ resolve({
+ browser: true,
+ dedupe: ['svelte']
+ }),
+ commonjs(),
+
+ // Watch the `public` directory and refresh the
+ // browser on changes when not in production
+ !production && livereload('public'),
+
+ // If we're building for production (npm run build
+ // instead of npm run dev), minify
+ production && terser()
+ ],
+ watch: {
+ clearScreen: false
+ },
+};
+
+export default [ prod, test ];
diff --git a/tests/components/ct-svelte4/scripts/setupTypeScript.js b/tests/components/ct-svelte4/scripts/setupTypeScript.js
new file mode 100644
index 0000000000..e6184aa223
--- /dev/null
+++ b/tests/components/ct-svelte4/scripts/setupTypeScript.js
@@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+
+
+ As well as validating the code for CI.
+ */
+
+/** To work on this script:
+ rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+ "svelte-check": "^2.0.0",
+ "svelte-preprocess": "^4.0.0",
+ "@rollup/plugin-typescript": "^8.0.0",
+ "typescript": "^4.0.0",
+ "tslib": "^2.0.0",
+ "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+ "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("
+
+
+{#if path === '/'}
+
+{:else if path === '/dashboard'}
+
+{/if}
diff --git a/tests/components/ct-svelte4/src/assets/index.css b/tests/components/ct-svelte4/src/assets/index.css
new file mode 100644
index 0000000000..97495c44b8
--- /dev/null
+++ b/tests/components/ct-svelte4/src/assets/index.css
@@ -0,0 +1,20 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #e3e3e3;
+ background-color: #1b1b1d;
+ }
+}
diff --git a/tests/components/ct-svelte4/src/components/Button.svelte b/tests/components/ct-svelte4/src/components/Button.svelte
new file mode 100644
index 0000000000..8c46efd1f2
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Button.svelte
@@ -0,0 +1,7 @@
+
+
+
diff --git a/tests/components/ct-svelte4/src/components/Component.svelte b/tests/components/ct-svelte4/src/components/Component.svelte
new file mode 100644
index 0000000000..179f993315
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Component.svelte
@@ -0,0 +1 @@
+test
diff --git a/tests/components/ct-svelte4/src/components/Counter.svelte b/tests/components/ct-svelte4/src/components/Counter.svelte
new file mode 100644
index 0000000000..38674bb6c3
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Counter.svelte
@@ -0,0 +1,14 @@
+
+
+
diff --git a/tests/components/ct-svelte4/src/components/DefaultSlot.svelte b/tests/components/ct-svelte4/src/components/DefaultSlot.svelte
new file mode 100644
index 0000000000..201dda6ce3
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/DefaultSlot.svelte
@@ -0,0 +1,9 @@
+
+
Welcome!
+
+
+
+
+
diff --git a/tests/components/ct-svelte4/src/components/Empty.svelte b/tests/components/ct-svelte4/src/components/Empty.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/components/ct-svelte4/src/components/MultiRoot.svelte b/tests/components/ct-svelte4/src/components/MultiRoot.svelte
new file mode 100644
index 0000000000..87996d0ce0
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/MultiRoot.svelte
@@ -0,0 +1,2 @@
+root 1
+root 2
diff --git a/tests/components/ct-svelte4/src/components/NamedSlots.svelte b/tests/components/ct-svelte4/src/components/NamedSlots.svelte
new file mode 100644
index 0000000000..5f0d988af5
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/NamedSlots.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
diff --git a/tests/components/ct-svelte4/src/main.js b/tests/components/ct-svelte4/src/main.js
new file mode 100644
index 0000000000..e081023688
--- /dev/null
+++ b/tests/components/ct-svelte4/src/main.js
@@ -0,0 +1,8 @@
+import App from './App.svelte';
+import './assets/index.css';
+
+const app = new App({
+ target: document.body,
+});
+
+export default app;
diff --git a/tests/components/ct-svelte4/src/pages/DashboardPage.svelte b/tests/components/ct-svelte4/src/pages/DashboardPage.svelte
new file mode 100644
index 0000000000..161f5338e8
--- /dev/null
+++ b/tests/components/ct-svelte4/src/pages/DashboardPage.svelte
@@ -0,0 +1 @@
+Dashboard
diff --git a/tests/components/ct-svelte4/src/pages/LoginPage.svelte b/tests/components/ct-svelte4/src/pages/LoginPage.svelte
new file mode 100644
index 0000000000..3c359ab27c
--- /dev/null
+++ b/tests/components/ct-svelte4/src/pages/LoginPage.svelte
@@ -0,0 +1 @@
+Login
diff --git a/tests/components/ct-svelte4/src/store/index.ts b/tests/components/ct-svelte4/src/store/index.ts
new file mode 100644
index 0000000000..43d7ee31fc
--- /dev/null
+++ b/tests/components/ct-svelte4/src/store/index.ts
@@ -0,0 +1,4 @@
+export let remountCount = 0;
+export function update() {
+ remountCount++;
+}
diff --git a/tests/components/ct-svelte4/tests/events.spec.ts b/tests/components/ct-svelte4/tests/events.spec.ts
new file mode 100644
index 0000000000..f2f2593515
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/events.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+
+test('emit an submit event when the button is clicked', async ({ mount }) => {
+ const messages: string[] = [];
+ const component = await mount(Button, {
+ props: {
+ title: 'Submit',
+ },
+ on: {
+ submit: (data: string) => messages.push(data),
+ },
+ });
+ await component.click();
+ expect(messages).toEqual(['hello']);
+});
diff --git a/tests/components/ct-svelte4/tests/render.spec.ts b/tests/components/ct-svelte4/tests/render.spec.ts
new file mode 100644
index 0000000000..3c0ada7a61
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/render.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import Component from '@/components/Component.svelte';
+import Empty from '@/components/Empty.svelte';
+
+test('render props', async ({ mount }) => {
+ const component = await mount(Button, {
+ props: {
+ title: 'Submit',
+ },
+ });
+ await expect(component).toContainText('Submit');
+});
+
+test('render a component without options', async ({ mount }) => {
+ const component = await mount(Component);
+ await expect(component).toContainText('test');
+});
+
+test('get textContent of the empty component', async ({ mount }) => {
+ const component = await mount(Empty);
+ expect(await component.allTextContents()).toEqual(['']);
+ expect(await component.textContent()).toBe('');
+ await expect(component).toHaveText('');
+});
diff --git a/tests/components/ct-svelte4/tests/router.spec.ts b/tests/components/ct-svelte4/tests/router.spec.ts
new file mode 100644
index 0000000000..127620b3c9
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/router.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import App from '@/App.svelte';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+ const component = await mount(App);
+ await expect(component.getByRole('main')).toHaveText('Login');
+ await expect(page).toHaveURL('/');
+ await component.getByRole('link', { name: 'Dashboard' }).click();
+ await expect(component.getByRole('main')).toHaveText('Dashboard');
+ await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-svelte4/tests/slots.spec.ts b/tests/components/ct-svelte4/tests/slots.spec.ts
new file mode 100644
index 0000000000..4d6823abe7
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/slots.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import DefaultSlot from '@/components/DefaultSlot.svelte';
+import NamedSlots from '@/components/NamedSlots.svelte';
+
+test('render a default slot', async ({ mount }) => {
+ const component = await mount(DefaultSlot, {
+ slots: {
+ default: 'Main Content',
+ },
+ });
+ await expect(component).toContainText('Main Content');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+ const component = await mount(NamedSlots, {
+ slots: {
+ header: 'Header',
+ main: 'Main Content',
+ footer: 'Footer',
+ },
+ });
+ await expect(component).toContainText('Header');
+ await expect(component).toContainText('Main Content');
+ await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-svelte4/tests/unmount.spec.ts b/tests/components/ct-svelte4/tests/unmount.spec.ts
new file mode 100644
index 0000000000..c0ac0f6785
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/unmount.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import MultiRoot from '@/components/MultiRoot.svelte';
+
+test('unmount', async ({ page, mount }) => {
+ const component = await mount(Button, {
+ props: {
+ title: 'Submit',
+ },
+ });
+ await expect(page.locator('#root')).toContainText('Submit');
+ await component.unmount();
+ await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ page, mount }) => {
+ const component = await mount(MultiRoot);
+ await expect(page.locator('#root')).toContainText('root 1');
+ await expect(page.locator('#root')).toContainText('root 2');
+ await component.unmount();
+ await expect(page.locator('#root')).not.toContainText('root 1');
+ await expect(page.locator('#root')).not.toContainText('root 2');
+});
+
+test('unmount twice throws an error', async ({ mount }) => {
+ const component = await mount(Button, {
+ props: {
+ title: 'Submit',
+ },
+ });
+ await component.unmount();
+ await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-svelte4/tests/update.spec.ts b/tests/components/ct-svelte4/tests/update.spec.ts
new file mode 100644
index 0000000000..358204edfa
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/update.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Counter from '@/components/Counter.svelte';
+
+test('update props without remounting', async ({ mount }) => {
+ const component = await mount(Counter, {
+ props: { count: 9001 },
+ });
+ await expect(component.getByTestId('props')).toContainText('9001');
+
+ await component.update({
+ props: { count: 1337 },
+ });
+ await expect(component).not.toContainText('9001');
+ await expect(component.getByTestId('props')).toContainText('1337');
+
+ await expect(component.getByTestId('remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+ const component = await mount(Counter);
+
+ const messages: string[] = [];
+ await component.update({
+ on: {
+ submit: (data: string) => messages.push(data),
+ },
+ });
+ await component.click();
+ expect(messages).toEqual(['hello']);
+
+ await expect(component.getByTestId('remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-svelte4/tsconfig.json b/tests/components/ct-svelte4/tsconfig.json
new file mode 100644
index 0000000000..4ce7ec19bf
--- /dev/null
+++ b/tests/components/ct-svelte4/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "module": "ESNext",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "moduleResolution": "node",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ "*": ["_"],
+ }
+ }
+}