diff --git a/package.json b/package.json
index 8e979756..52b6b629 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"archive": "git archive --format zip --output dist/source-code.zip master",
"lint": "eslint 'src/**/*.{ts,tsx}' 'test-e2e/**/*.ts'",
"test": "mochette -c tsconfig.cjs.json 'src/**/*.test.{ts,tsx}'",
- "test-e2e": "TS_NODE_PROJECT=tsconfig.cjs.json yarn ts-node test-e2e/run.ts --default-timeout 2000",
+ "test-e2e": "TS_NODE_PROJECT=tsconfig.cjs.json ts-node test-e2e/run.ts --default-timeout 2000",
"dev": "DEBUG=true concurrently 'npm run build:test -- --watch --no-watch.clearScreen' 'wmr start --port 8100 --cwd test-e2e/fixtures/'",
"dev:legacy": "webpack-dev-server --inline",
"run:chrome": "DEBUG=true npm run build:chrome && mkdir -p ./profiles/chrome && node tools/run-chrome.js",
@@ -42,7 +42,7 @@
"@testing-library/preact": "^2.0.0",
"@types/archiver": "^3.1.0",
"@types/chrome": "^0.0.119",
- "@types/puppeteer": "^3.0.1",
+ "@types/puppeteer": "^2.0.1",
"@typescript-eslint/eslint-plugin": "^3.6.0",
"@typescript-eslint/parser": "^3.6.0",
"archiver": "^4.0.1",
diff --git a/test-e2e/fixtures/suspense.js b/test-e2e/fixtures/suspense.js
new file mode 100644
index 00000000..610e3498
--- /dev/null
+++ b/test-e2e/fixtures/suspense.js
@@ -0,0 +1,42 @@
+const { h, render } = preact;
+const { Suspense } = preactCompat;
+const { useMemo } = preactHooks;
+
+function withDelay(ms) {
+ useMemo(() => {
+ let done = false;
+ const promise = new Promise(resolve => setTimeout(resolve, ms)).then(() => {
+ done = true;
+ });
+ return () => {
+ if (!done) {
+ throw promise;
+ }
+ };
+ }, [])();
+}
+
+function Block(props) {
+ const style = "padding: 2rem; background: " + props.background + ";";
+ return html`
+
${props.children}/>
+ `;
+}
+
+function Delayed(props) {
+ withDelay(props.waitMs);
+ return html` <${Block} id="delayed" background="cadetblue" /> `;
+}
+
+function Shortly() {
+ const fallback = html` <${Block} id="skeleton" background="grey" /> `;
+ return html`
+ <${Block} id="container" background="black">
+ <${Suspense} fallback=${fallback}>
+ <${Delayed} waitMs=${500} />
+ />
+ />
+ `;
+}
+
+render(h(Shortly), document.getElementById("app"));
diff --git a/test-e2e/tests/highlight-margin.test.ts b/test-e2e/tests/highlight-margin.test.ts
index d3dd4220..6b3ec622 100644
--- a/test-e2e/tests/highlight-margin.test.ts
+++ b/test-e2e/tests/highlight-margin.test.ts
@@ -3,7 +3,7 @@ import { expect } from "chai";
import { wait } from "pentf/utils";
import { Page } from "puppeteer";
-export const description = "Hihglight overlay should account for margin";
+export const description = "Highlight overlay should account for margin";
function getHighlightSize(page: Page) {
return getSize(page, "#preact-devtools-highlighter > div");
diff --git a/test-e2e/tests/highlight-suspense.test.ts b/test-e2e/tests/highlight-suspense.test.ts
new file mode 100644
index 00000000..e6dabbb1
--- /dev/null
+++ b/test-e2e/tests/highlight-suspense.test.ts
@@ -0,0 +1,29 @@
+import { newTestPage, getSize } from "../test-utils";
+import { expect } from "chai";
+import { wait } from "pentf/utils";
+
+import type { Page } from "puppeteer";
+
+export const description = "Display and highlighting of Suspense in devtools";
+
+function getHighlightSize(page: Page): unknown {
+ return getSize(page, "#preact-devtools-highlighter > div");
+}
+
+export async function run(config: any): Promise {
+ const { page, devtools } = await newTestPage(config, "suspense");
+
+ // TODO: would expect tree-item list to be:
+ // ["Block", "Shortly", "Suspense", "Delayed", "Block"]
+ // but is actually:
+ // ["Block", "Shortly", "Suspense", "m"]
+
+ await devtools.hover('[data-testid="tree-item"][data-name="Suspense"]');
+ // Wait for possible flickering to occur
+ await wait(1000);
+ const sizeOnPage = await getSize(page, '[data-testid="container"]');
+ const sizeOfHighlight = await getHighlightSize(page);
+ expect(sizeOfHighlight).to.eql(sizeOnPage);
+
+ // TODO: expect size of delayed child to be correctly shown
+}