[test] Fixes benchmarks/suite.bench.ts

Details:
- Fixes benchmark suites so that it compiles properly, and so that it
  compares comparable things
- Updates README.md

Author: jacomyal

packages/test/README.md

@@ -21,4 +21,4 @@ Unit testing is performed using [Vitest](https://vitest.dev/), using the [browse
 
 ## Benchmarking
 
-Benchmarking scenarii have been written to run using the `vitest bench` command. Unfortunately, at the moment, **they don't work properly** because of [some issue](https://github.com/vitest-dev/vitest/issues/5041) with Vitest benchmark mode compatibility with the browser mode.
+Benchmarking scenarii have been written to run using the `vitest bench` command.

packages/test/benchmarks/suite.bench.ts

@@ -1,14 +1,13 @@
-import Graph from "graphology";
+import { MultiGraph } from "graphology";
 import { SerializedGraph } from "graphology-types";
 import Sigma from "sigma";
 import { bench, describe } from "vitest";
 
 import MEDIUM_GRAPH from "../datasets/arctic.json";
 import LARGE_GRAPH from "../datasets/large-graph.json";
 import SMALL_GRAPH from "../datasets/les-miserables.json";
-import { rafNTimes } from "../helpers";
 
-const TIMES = 20;
+const ITERATIONS = 20;
 const METHODS = ["refresh", "render"] as const;
 const SIZES = ["small", "medium", "large"] as const;
 type Size = (typeof SIZES)[number];
@@ -24,35 +23,39 @@ const GRAPHS = {
   large: LARGE_GRAPH as SerializedGraph,
 };
 
-describe("Benchmarks", () => {
-  METHODS.forEach((method) =>
+METHODS.forEach((method) => {
+  describe(`Benchmarking method "${method}"`, () => {
     SIZES.forEach((screenSize) =>
       SIZES.forEach((graphSize) => {
-        bench(`${method}-${screenSize}-scene-${graphSize}-graph`, async () => {
-          const container = document.createElement("div");
-          document.body.append(container);
-          const size = SCREEN_SIZES[screenSize];
-          container.style.width = `${size}px`;
-          container.style.height = `${size}px`;
-          const graph = new Graph();
-          graph.import(GRAPHS[graphSize] as SerializedGraph);
-          const sigma = new Sigma(graph, container);
-          const camera = sigma.getCamera();
+        const size = SCREEN_SIZES[screenSize];
 
-          switch (method) {
-            case "refresh":
-              return rafNTimes(() => {
+        const container = document.createElement("div");
+        document.body.append(container);
+        container.style.width = `${size}px`;
+        container.style.height = `${size}px`;
+
+        const graph = new MultiGraph();
+        graph.import(GRAPHS[graphSize] as SerializedGraph);
+
+        const sigma = new Sigma(graph, container);
+        const camera = sigma.getCamera();
+        bench(
+          `${screenSize} scene, ${graphSize} graph`,
+          () => {
+            switch (method) {
+              case "refresh":
                 // This simulates a layout iteration, that triggers a full reindex of the graph:
                 graph.forEachNode((node) => graph.mergeNodeAttributes(node, { x: Math.random(), y: Math.random() }));
-              }, TIMES);
-            case "render":
-              return rafNTimes(() => {
+                break;
+              case "render":
                 // This simulates a user interaction, that triggers a render of the graph:
                 camera.setState({ angle: camera.angle + 0.1 });
-              }, TIMES);
-          }
-        });
+                break;
+            }
+          },
+          { iterations: ITERATIONS },
+        );
       }),
-    ),
-  );
+    );
+  });
 });