update simple suspense rendere

Author: JoviDeCroock

package.json

@@ -35,7 +35,7 @@
 		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
 		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
 		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.js",
-		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/index.test.js'",
+		"test:mocha:compat": "cross-env BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/*.test.js'",
 		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/index.test.js'",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
 		"prepublishOnly": "npm run build",

test/compat/async.test.js

@@ -0,0 +1,68 @@
+import render from '../../src/index.js';
+import {
+	h,
+	Component,
+	createContext,
+	Fragment,
+	options,
+	createRef
+} from 'preact';
+import { Suspense } from 'preact/compat';
+import { expect } from 'chai';
+import { createSuspender } from '../utils.js';
+
+describe('Async renderToString', () => {
+	it('should render JSX after a suspense boundary', async () => {
+		const { Suspender, suspended } = createSuspender();
+
+		const promise = render(
+			<Suspense fallback={<div>loading...</div>}>
+				<Suspender>
+					<div class="foo">bar</div>
+				</Suspender>
+			</Suspense>
+		);
+
+		const expected = `<div class="foo">bar</div>`;
+
+		suspended.resolve();
+
+		const rendered = await promise;
+
+		expect(rendered).to.equal(expected);
+	});
+
+	it('should render JSX with nested suspense boundary', async () => {
+		const {
+			Suspender: SuspenderOne,
+			suspended: suspendedOne
+		} = createSuspender();
+		const {
+			Suspender: SuspenderTwo,
+			suspended: suspendedTwo
+		} = createSuspender();
+
+		const promise = render(
+			<ul>
+				<Suspense fallback={null}>
+					<SuspenderOne>
+						<li>one</li>
+						<SuspenderTwo>
+							<li>two</li>
+						</SuspenderTwo>
+						<li>three</li>
+					</SuspenderOne>
+				</Suspense>
+			</ul>
+		);
+
+		const expected = `<ul><li>one</li><li>two</li><li>three</li></ul>`;
+
+		suspendedOne.resolve();
+		suspendedTwo.resolve();
+
+		const rendered = await promise;
+
+		expect(rendered).to.equal(expected);
+	});
+});

test/render.test.js

@@ -1,7 +1,6 @@
 import render from '../src/index.js';
 import renderToStringPretty from '../src/pretty.js';
 import renderToStringJSX from '../src/jsx.js';
-import { createSuspender } from './utils.js';
 import {
 	h,
 	Component,
@@ -18,7 +17,6 @@ import {
 	useMemo,
 	useId
 } from 'preact/hooks';
-import { Suspense } from 'preact/compat';
 import { expect } from 'chai';
 import { spy, stub, match } from 'sinon';
 import { svgAttributes, htmlAttributes } from './utils.js';
@@ -41,60 +39,6 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
-		it('should render JSX after a suspense boundary', async () => {
-			const { Suspender, suspended } = createSuspender();
-
-			const promise = render(
-				<Suspense fallback={<div>loading...</div>}>
-					<Suspender>
-						<div class="foo">bar</div>
-					</Suspender>
-				</Suspense>
-			);
-
-			const expected = `<div class="foo">bar</div>`;
-
-			suspended.resolve();
-
-			const rendered = await promise;
-
-			expect(rendered).to.equal(expected);
-		});
-
-		it('should render JSX with nested suspense boundary', async () => {
-			const {
-				Suspender: SuspenderOne,
-				suspended: suspendedOne
-			} = createSuspender();
-			const {
-				Suspender: SuspenderTwo,
-				suspended: suspendedTwo
-			} = createSuspender();
-
-			const promise = render(
-				<ul>
-					<Suspense fallback={null}>
-						<SuspenderOne>
-							<li>one</li>
-							<SuspenderTwo>
-								<li>two</li>
-							</SuspenderTwo>
-							<li>three</li>
-						</SuspenderOne>
-					</Suspense>
-				</ul>
-			);
-
-			const expected = `<ul><li>one</li><li>two</li><li>three</li></ul>`;
-
-			suspendedOne.resolve();
-			suspendedTwo.resolve();
-
-			const rendered = await promise;
-
-			expect(rendered).to.equal(expected);
-		});
-
 		describe('whitespace', () => {
 			it('should omit whitespace between elements', () => {
 				let children = [];