feat: updates sveltekit starter dependencies and testing strategy

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 # UNRELEASED
 
+### feat: updates sveltekit starter dependencies and testing strategy
+
+Now uses `@testing-library/svelte` and requires less setup logic in the "frontend tests"
+
 # 0.28.0
 
 ### fix: deps deploy works with Canister ID out of the ranges of the pocket-ic subnets

src/dfx/assets/project_templates/svelte/src/__frontend_name__/package.json

@@ -11,20 +11,20 @@
     "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
   },
   "dependencies": {
-    "@dfinity/agent": "^2.1.3",
-    "@dfinity/candid": "^2.1.3",
-    "@dfinity/principal": "^2.1.3"
+    "@dfinity/agent": "^2.4.1",
+    "@dfinity/candid": "^2.4.1",
+    "@dfinity/principal": "^2.4.1"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.4",
-    "@sveltejs/kit": "^2.5.26",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "dotenv": "^16.3.1",
-    "sass": "^1.63.6",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.1",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.3",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.22.4",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "dotenv": "^17.2.0",
+    "sass": "^1.89.2",
+    "svelte": "^5.35.5",
+    "svelte-check": "^4.2.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-plugin-environment": "^1.1.3"
   }
 }

src/dfx/assets/project_templates/svelte/src/__frontend_name__/vite.config.js

@@ -6,7 +6,7 @@ import dotenv from 'dotenv';
 
 dotenv.config({ path: '../../.env' });
 
-export default defineConfig({
+export default defineConfig(({mode}) => ({
   build: {
     emptyOutDir: true,
   },
@@ -41,4 +41,4 @@ export default defineConfig({
     ],
     dedupe: ['@dfinity/agent'],
   },
-});
+}));

src/dfx/assets/project_templates/svelte_tests/src/__frontend_name__/package.json-patch

@@ -2,22 +2,22 @@
     {
         "op": "add",
         "path": "/devDependencies/@testing-library~1jest-dom",
-        "value": "^5.16.5"
+        "value": "^6.6.3"
     },
     {
         "op": "add",
-        "path": "/devDependencies/cross-fetch",
-        "value": "^3.1.6"
+        "path": "/devDependencies/@testing-library~1svelte",
+        "value": "^5.2.1"
     },
     {
         "op": "add",
         "path": "/devDependencies/jsdom",
-        "value": "^22.1.0"
+        "value": "^26.1.0"
     },
     {
         "op": "add",
         "path": "/devDependencies/vitest",
-        "value": "^2.0.5"
+        "value": "^3.2.4"
     },
     {
         "op": "add",

src/dfx/assets/project_templates/svelte_tests/src/__frontend_name__/src/tests/App.test.js

@@ -1,19 +1,14 @@
-import { test, expect, afterEach } from 'vitest';
+import {render, screen} from '@testing-library/svelte'
+import { test, expect } from 'vitest';
 import App from '../routes/+page.svelte';
 
 let host;
 
-afterEach(() => {
-  host.remove();
-});
-
 test('mount component', async () => {
-  host = document.createElement('div');
-  host.setAttribute('id', 'host');
-  document.body.appendChild(host);
-  const instance = new App({ target: host, props: {} });
-  expect(instance).toBeTruthy();
-  expect(host.innerHTML).toMatchInlineSnapshot(
+  render(App,{ target: host, props: {} });
+
+  const main = screen.getByRole('main');
+  expect(main.outerHTML).toMatchInlineSnapshot(
     '"<main><img src="/logo2.svg" alt="DFINITY logo"> <br> <br> <form action="#"><label for="name">Enter your name: &nbsp;</label> <input id="name" alt="Name" type="text"> <button type="submit">Click Me!</button></form> <section id="greeting"></section></main>"'
   );
 });

src/dfx/assets/project_templates/svelte_tests/src/__frontend_name__/vite.config.js.patch

@@ -6,6 +6,6 @@
 @@ -33,1 +33,5 @@
 +  test: {
 +    environment: 'jsdom',
-+    setupFiles: 'src/setupTests.js',
 +  },
    resolve: {
++    conditions: mode === 'test' ? ['browser'] : [],