fix: add testcase for failing dev reload

Author: dominikg

packages/e2e-tests/build-watch/__tests__/build-watch.spec.ts

@@ -8,7 +8,8 @@ import {
 	sleep,
 	getColor,
 	browserLogs,
-	e2eServer
+	e2eServer,
+	getWatchErrors
 } from '~utils';
 
 import * as vite from 'vite';
@@ -63,17 +64,6 @@ describe.runIf(isBuildWatch)('build-watch', () => {
 		const updateApp = editFileAndWaitForBuildWatchComplete.bind(null, 'src/App.svelte');
 		const updateStore = editFileAndWaitForBuildWatchComplete.bind(null, 'src/stores/hmr-stores.js');
 
-		const getWatchErrors = () =>
-			isRolldownVite
-				? e2eServer.logs.watch.err.filter(
-						(m) =>
-							![
-								'Support for rolldown-vite in vite-plugin-svelte is experimental',
-								'See https://github.com/sveltejs/vite-plugin-svelte/issues/1143'
-							].some((s) => m.includes(s))
-					)
-				: e2eServer.logs.watch.err;
-
 		test('should have expected initial state', async () => {
 			// initial state, both counters 0, both labels red
 			expect(await getText('#hmr-test-1 .counter')).toBe('0');

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -12,7 +12,8 @@ import {
 	fetchPageText,
 	reloadPage,
 	readFileContent,
-	IS_SVELTE_BASELINE
+	IS_SVELTE_BASELINE,
+	getServerErrors
 } from '~utils';
 
 import glob from 'tiny-glob';
@@ -95,6 +96,11 @@ describe('kit-node', () => {
 			expect(browserLogs.some((x) => x === 'onMount dynamic imported isSSR: false')).toBe(true);
 		});
 
+		it('should load dynamic import with css', async () => {
+			expect(await getText('#dynamic-imported')).toBe("i'm blue");
+			expect(await getColor('#css-transform')).toBe('blue');
+		});
+
 		it('should respect transforms', async () => {
 			expect(await getText('#js-transform')).toBe('Hello world');
 			expect(await getColor('#css-transform')).toBe('red');
@@ -197,6 +203,12 @@ describe('kit-node', () => {
 				expect(await getText('#hmr-test2')).toBe('bar');
 			});
 
+			it('should not have errors on reload', async () => {
+				expect(getServerErrors(), 'error log of `vite dev` is not empty before reload').toEqual([]);
+				await reloadPage();
+				expect(getServerErrors(), 'error log of `vite dev` is not empty after reload').toEqual([]);
+			});
+
 			describe('child component update', () => {
 				const updateChild = editFileAndWaitForHmrComplete.bind(null, 'src/lib/Child.svelte');
 				const updateCounter = editFileAndWaitForHmrComplete.bind(null, 'src/lib/Counter.svelte');

packages/e2e-tests/kit-node/package.json

@@ -18,8 +18,9 @@
     "@sveltejs/package": "^2.4.1",
     "@sveltejs/vite-plugin-svelte": "workspace:^",
     "e2e-test-dep-svelte-api-only": "file:../_test_dependencies/svelte-api-only",
-    "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
     "e2e-test-dep-svelte-nested-workspace-devdep": "../_test_dependencies/svelte-nested-workspace-devdep",
+    "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
+    "sass": "^1.90.0",
     "svelte": "^5.38.0",
     "svelte-check": "^4.3.1",
     "svelte-i18n": "^4.0.1",

packages/e2e-tests/kit-node/src/routes/+page.svelte

@@ -4,6 +4,8 @@
 	import Counter from '$lib/Counter.svelte';
 	import Child from '$lib/Child.svelte';
 	import { setSomeContext } from 'e2e-test-dep-svelte-api-only';
+	import { browser } from '$app/environment';
+
 	export let data = {};
 	$: load_status = data?.load_status ?? 'NOT_LOADED';
 	const jsTransform = '__JS_TRANSFORM_1__';
@@ -38,6 +40,13 @@
 	<p id="js-transform">{jsTransform}</p>
 	<!-- to be transformed into "hello-world" class -->
 	<p id="css-transform">Hello world</p>
+	{#if browser}
+		{#await import('./DynamicImported.svelte').then((m) => m.default)}
+			loading...
+		{:then DynamicImported}
+			<DynamicImported />
+		{/await}
+	{/if}
 </main>
 
 <!-- HMR-TEMPLATE-INJECT -->

packages/e2e-tests/kit-node/src/routes/DynamicImported.svelte

@@ -0,0 +1,7 @@
+<div id="dynamic-imported">i'm blue</div>
+
+<style lang="postcss">
+	#dynamic-import {
+		color: blue;
+	}
+</style>

packages/e2e-tests/kit-node/svelte.config.js

@@ -1,6 +1,9 @@
 import node from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	preprocess: vitePreprocess(),
 	kit: {
 		adapter: node()
 	}

packages/e2e-tests/kit-node/vite.config.js

@@ -19,5 +19,10 @@ export default {
 	optimizeDeps: {
 		// eagerly include these, otherwise vite optimizer might interfere with restarting while the test is running
 		include: ['svelte-i18n', 'e2e-test-dep-svelte-api-only']
+	},
+	css: {
+		postcss: {
+			plugins: [{ postcssPlugin: 'noop' }]
+		}
 	}
 };

packages/e2e-tests/testUtils.ts

@@ -18,6 +18,10 @@ import {
 	waitForViteConnect
 } from './vitestSetup.js';
 
+import * as vite from 'vite';
+//@ts-ignore
+const isRolldownVite = !!vite.rolldownVersion;
+
 import { VERSION } from 'svelte/compiler';
 
 export const IS_SVELTE_BASELINE = VERSION === '5.0.0';
@@ -354,3 +358,28 @@ export function readVitePrebundleMetadata() {
 	}
 	throw new Error('Unable to find vite prebundle metadata');
 }
+
+export function getServerErrors() {
+	return filterMessages(e2eServer.logs.server.err);
+}
+
+export function getWatchErrors() {
+	return filterMessages(e2eServer.logs.watch.err);
+}
+function filterMessages(arr) {
+	if (arr.length === 0) {
+		return arr;
+	}
+	const excludes = [];
+	if (isRolldownVite) {
+		excludes.push(
+			'Support for rolldown-vite in vite-plugin-svelte is experimental',
+			'See https://github.com/sveltejs/vite-plugin-svelte/issues/1143'
+		);
+	}
+	if (excludes.length > 0) {
+		return arr.filter((m) => excludes.some((e) => m.includes(e)));
+	} else {
+		return arr;
+	}
+}