test for shallow navigation with effects

Author: eltigerchino

.changeset/chatty-pears-notice.md

@@ -2,4 +2,4 @@
 '@sveltejs/kit': patch
 ---
 
-fix: prevent infinite loop when calling `pushState`/`replaceState` in effect
+fix: prevent infinite loop when calling `pushState`/`replaceState` in `$effect`

packages/kit/test/apps/basics/src/app.d.ts

@@ -10,10 +10,9 @@ declare global {
 		}
 
 		interface PageState {
-			active: boolean;
+			active?: boolean;
+			count?: number;
 		}
-
-		interface Platform {}
 	}
 }
 

packages/kit/test/apps/basics/src/routes/shallow-routing/push-state/effect/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { pushState } from '$app/navigation';
+
+	let count = $state(0);
+
+	$effect(() => {
+		if (count) pushState('', { count });
+	});
+</script>
+
+<p>count: {count}</p>
+<button onclick={() => count++}>Increment</button>

packages/kit/test/apps/basics/src/routes/shallow-routing/replace-state/effect/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { pushState as replaceState } from '$app/navigation';
+
+	let count = $state(0);
+
+	$effect(() => {
+		if (count) replaceState('', { count });
+	});
+</script>
+
+<p>count: {count}</p>
+<button onclick={() => count++}>Increment</button>

packages/kit/test/apps/basics/test/client.test.js

@@ -1477,6 +1477,21 @@ test.describe('Shallow routing', () => {
 		await expect(page.locator('h1')).toHaveText('parent');
 		await expect(page.locator('p')).toHaveText('active: true');
 	});
+
+	// TODO: pushState/replaceState infinite loop in $effect
+	test('pushState does not loop infinitely in $effect', async ({ page }) => {
+		await page.goto('/shallow-routing/push-state/effect');
+		await expect(page.locator('p')).toHaveText('count: 0');
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText('count: 1');
+	});
+
+	test('replaceState does not loop infinitely in $effect', async ({ page }) => {
+		await page.goto('/shallow-routing/replace-state/effect');
+		await expect(page.locator('p')).toHaveText('count: 0');
+		await page.locator('button').click();
+		await expect(page.locator('p')).toHaveText('count: 1');
+	});
 });
 
 test.describe('reroute', () => {