chore: Made the tests less brittle

Author: ZeeCoder

tests/basic.tsx

@@ -18,6 +18,7 @@ import {
   HandlerResolverComponentProps,
 } from "./utils";
 import awaitNextFrame from "./utils/awaitNextFrame";
+import delay from "./utils/delay";
 
 describe("Vanilla tests", () => {
   it("should render with undefined sizes at first", async () => {
@@ -95,10 +96,8 @@ describe("Vanilla tests", () => {
       waitForFirstMeasurement: true,
     });
 
-    await Promise.all([
-      handler1.setAndAssertSize({ width: 100, height: 200 }),
-      handler2.setAndAssertSize({ width: 300, height: 400 }),
-    ]);
+    await handler1.setAndAssertSize({ width: 100, height: 200 });
+    await handler2.setAndAssertSize({ width: 300, height: 400 });
 
     // By the first measurement the component would've rendered three times:
     // - First natural render with "undefined" values

tests/ie/polyfilled.tsx

@@ -10,6 +10,7 @@ import useResizeObserver from "../../polyfilled";
 import delay from "../utils/delay";
 // @ts-ignore
 import ROP from "resize-observer-polyfill";
+import awaitNextFrame from "../utils/awaitNextFrame";
 
 /**
  * This test ensures that the shipped polyfilled version actually works.
@@ -51,7 +52,7 @@ describe("Polyfilled lib testing", () => {
 
     const { assertSize } = await render(Test);
 
-    await delay(50);
+    await awaitNextFrame();
     assertSize({ width: 50, height: 40 });
   });
 });

tests/utils/awaitNextFrame.ts

@@ -1,9 +1,12 @@
 // @see https://stackoverflow.com/a/21825207/982092
 // @ts-ignore
 const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+// TODO instead of hardcoded values, we should wait with a timeout for sizes to
+//      be reported whenever they're available. (rAF in a loop maybe)
 export default function awaitNextFrame() {
   return new Promise((resolve) =>
     // Seems like that on IE with the RO polyfill we need to slow things down a bit
-    setTimeout(resolve, 1000 / (isIE11 ? 10 : 60))
+    // Also, 1000 / 60 did not seem to not be enough of a wait sometimes on modern browsers either.
+    setTimeout(resolve, 1000 / (isIE11 ? 5 : 30))
   );
 }

tests/utils/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef, RefObject, FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 import useResizeObserver from "../..";
 import useMergedCallbackRef from "./useMergedCallbackRef";
-import delay from "./delay";
+import awaitNextFrame from "./awaitNextFrame";
 
 export type Size = {
   width: number;
@@ -80,7 +80,7 @@ export function createComponentHandler({
     };
     handler.setAndAssertSize = async (size) => {
       handler.setSize(size);
-      await delay(50);
+      await awaitNextFrame();
       handler.assertSize(size);
     };
   }
@@ -198,7 +198,7 @@ export function render(
       handler: T | T[]
     ): Promise<void> {
       if (waitForFirstMeasurement) {
-        await delay(50);
+        await awaitNextFrame();
       }
 
       resolve(handler);