test(e2e): add cyclic reference test

packages/astro/e2e/error-cyclic.test.js

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { testFactory, getErrorOverlayMessage } from './test-utils.js';
+
+const test = testFactory({ root: './fixtures/error-cyclic/' });
+
+let devServer;
+
+test.beforeEach(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterEach(async ({ astro }) => {
+	await devServer.stop();
+	astro.resetAllFiles();
+});
+
+test.describe('Error: Cyclic Reference', () => {
+	test('overlay', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const message = await getErrorOverlayMessage(page);
+		expect(message).toMatch('Cyclic reference');
+	});
+});

packages/astro/e2e/fixtures/error-cyclic/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@e2e/error-cyclic",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/preact": "workspace:*"
+  }
+}

packages/astro/e2e/fixtures/error-cyclic/src/components/PreactCounter.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'preact/hooks';
+
+/** a counter written in Preact */
+export function PreactCounter({ children, id }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<div id={id} class="counter">
+			<button class="decrement" onClick={subtract}>-</button>
+			<pre>{count}</pre>
+			<button class="increment" onClick={add}>+</button>
+			<div class="children">{children}</div>
+		</div>
+	);
+}

packages/astro/e2e/fixtures/error-cyclic/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import { PreactCounter } from '../components/PreactCounter'
+
+const cycle: any = { foo: ['bar'] }
+cycle.foo.push(cycle)
+---
+
+<PreactCounter client:load cycle={cycle} />