Reduce test flakyness

Author: marvinhagemeister

test-e2e/tests/hooks/hook-name.test.ts

@@ -1,6 +1,7 @@
 import { newTestPage, getHooks, waitForSelector } from "../../test-utils";
 import { expect } from "chai";
 import { clickNestedText, clickSelector } from "pentf/browser_utils";
+import { assertEventually } from "pentf/assert_utils";
 
 export const description = "Show custom hook name";
 
@@ -24,47 +25,93 @@ export async function run(config: any) {
 	// Callback (Mixed)
 	await clickNestedText(devtools, /CounterCallback$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useState counterState", "0"],
-		["useCallback", "ƒ ()"],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useState counterState", "0"],
+				["useCallback", "ƒ ()"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Reducer
 	await clickNestedText(devtools, /ReducerComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useReducer customReducer", '"foo"'],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useReducer customReducer", '"foo"'],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Ref
 	await clickNestedText(devtools, /RefComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useRef customRef", "0"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useRef customRef", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// useMemo
 	await clickNestedText(devtools, /MemoComponent$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useMemo customMemo", "0"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useMemo customMemo", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Multiple (test ordering)
 	await clickNestedText(devtools, /^Multiple$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([
-		["useState foo", "0"],
-		["useState bar", "0"],
-		["useState baz", "0"],
-	]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useState foo", "0"],
+				["useState bar", "0"],
+				["useState baz", "0"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	// Do nothing for invalid callsites
 	await clickNestedText(devtools, /CallbackOnly$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useCallback", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([["useCallback", "ƒ ()"]]);
+		},
+		{ crashOnError: false },
+	);
 
 	await clickNestedText(devtools, /LayoutEffect$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useLayoutEffect", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([
+				["useLayoutEffect", "ƒ ()"],
+			]);
+		},
+		{ crashOnError: false },
+	);
 
 	await clickNestedText(devtools, /^Effect$/);
 	await waitForSelector(devtools, hooksPanel);
-	expect(await getHooks(devtools)).to.deep.equal([["useEffect", "ƒ ()"]]);
+	await assertEventually(
+		async () => {
+			expect(await getHooks(devtools)).to.deep.equal([["useEffect", "ƒ ()"]]);
+		},
+		{ crashOnError: false },
+	);
 }

test-e2e/tests/profiler/flamegraph/memo-sibling.test.ts

@@ -41,12 +41,14 @@ export async function run(config: any) {
 	await clickRecordButton(devtools);
 
 	const nodes = await getFlameNodes(devtools);
-	expect(nodes).to.deep.equal([
-		{ maximized: true, name: "Fragment", visible: true },
-		{ maximized: false, name: "Counter", visible: true },
-		{ maximized: false, name: "Value1", visible: true },
-		{ maximized: false, name: "Value2", visible: true },
-	]);
+	expect(nodes.sort((a, b) => a.name.localeCompare(b.name))).to.deep.equal(
+		[
+			{ maximized: true, name: "Fragment", visible: true },
+			{ maximized: false, name: "Counter", visible: true },
+			{ maximized: false, name: "Value1", visible: true },
+			{ maximized: false, name: "Value2", visible: true },
+		].sort((a, b) => a.name.localeCompare(b.name)),
+	);
 
 	const memoSize = await getSize(
 		devtools,

test-e2e/tests/profiler/flamegraph/utils.ts

@@ -5,7 +5,7 @@ export async function getFlameNodes(page: Page) {
 		return els.map(el => {
 			return {
 				maximized: el.hasAttribute("data-maximized"),
-				name: el.querySelector('[data-testid="node-name"]')!.textContent,
+				name: el.querySelector('[data-testid="node-name"]')!.textContent || "",
 				visible: el.hasAttribute("data-visible"),
 			};
 		});