add test to check for VNode circular references inside suspense bound…

…ary renderChild
preactjs · Jan 10, 2025 · 28d27a5 · 28d27a5
1 parent 03a2545
commit 28d27a5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/test/compat/render-chunked.test.js b/test/compat/render-chunked.test.js
@@ -4,6 +4,7 @@ import { Suspense } from 'preact/compat';
 import { renderToChunks } from '../../src/lib/chunked';
 import { createSubtree, createInitScript } from '../../src/lib/client';
 import { createSuspender } from '../utils';
+import { VNODE, PARENT } from '../../src/lib/constants';
 
 describe('renderToChunks', () => {
 	it('should render non-suspended JSX in one go', async () => {
@@ -66,4 +67,52 @@ describe('renderToChunks', () => {
 			'</div>'
 		]);
 	});
+
+	it('should encounter no circular references when rendering a suspense boundary subtree', async () => {
+		const { Suspender, suspended } = createSuspender();
+
+		const visited = new Set();
+		let circular = false;
+
+		function CircularReferenceCheck() {
+			let root = this[VNODE];
+			while (root !== null && root[PARENT] !== null) {
+				if (visited.has(root)) {
+					// Can't throw an error here, _catchError handler will also loop infinitely
+					circular = true;
+					break;
+				}
+				visited.add(root);
+				root = root[PARENT];
+			}
+			return <p>it works</p>;
+		}
+
+		const result = [];
+		const promise = renderToChunks(
+			<div>
+				<Suspense fallback="loading...">
+					<Suspender>
+						<CircularReferenceCheck />
+					</Suspender>
+				</Suspense>
+			</div>,
+			{ onWrite: (s) => result.push(s) }
+		);
+
+		suspended.resolve();
+		await promise;
+
+		if (circular) {
+			throw new Error('CircularReference');
+		}
+
+		expect(result).to.deep.equal([
+			'<div><!--preact-island:16-->loading...<!--/preact-island:16--></div>',
+			'<div hidden>',
+			createInitScript(1),
+			createSubtree('16', '<p>it works</p>'),
+			'</div>'
+		]);
+	});
 });
diff --git a/test/compat/stream-node.test.js b/test/compat/stream-node.test.js
@@ -66,10 +66,10 @@ describe('renderToPipeableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:17-->loading...<!--/preact-island:17--></div>',
+			'<div><!--preact-island:24-->loading...<!--/preact-island:24--></div>',
 			'<div hidden>',
 			createInitScript(),
-			createSubtree('17', '<p>it works</p>'),
+			createSubtree('24', '<p>it works</p>'),
 			'</div>'
 		]);
 	});

diff --git a/test/compat/stream.test.js b/test/compat/stream.test.js
@@ -82,10 +82,10 @@ describe('renderToReadableStream', () => {
 		const result = await sink.promise;
 
 		expect(result).to.deep.equal([
-			'<div><!--preact-island:24-->loading...<!--/preact-island:24--></div>',
+			'<div><!--preact-island:31-->loading...<!--/preact-island:31--></div>',
 			'<div hidden>',
 			createInitScript(),
-			createSubtree('24', '<p>it works</p>'),
+			createSubtree('31', '<p>it works</p>'),
 			'</div>'
 		]);
 	});