chore: upgrade to react@19 (#9182)

packages/excalidraw/tests/App.test.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import * as StaticScene from "../renderer/staticScene";
 import { reseed } from "../random";
-import { render, queryByTestId } from "../tests/test-utils";
+import { render, queryByTestId, unmountComponent } from "../tests/test-utils";
 
 import { Excalidraw } from "../index";
 import { vi } from "vitest";
@@ -11,8 +10,7 @@ const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 describe("Test <App/>", () => {
   beforeEach(async () => {
-    // Unmount ReactDOM from root
-    ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+    unmountComponent();
     localStorage.clear();
     renderStaticScene.mockClear();
     reseed(7);

packages/excalidraw/tests/align.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { act, render } from "./test-utils";
+import { act, unmountComponent, render } from "./test-utils";
 import { Excalidraw } from "../index";
 import { defaultLang, setLanguage } from "../i18n";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
@@ -54,8 +53,7 @@ const createAndSelectTwoRectanglesWithDifferentSizes = () => {
 
 describe("aligning", () => {
   beforeEach(async () => {
-    // Unmount ReactDOM from root
-    ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+    unmountComponent();
     mouse.reset();
 
     await act(() => {

packages/excalidraw/tests/clipboard.test.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { vi } from "vitest";
-import ReactDOM from "react-dom";
-import { render, waitFor, GlobalTestState } from "./test-utils";
+import {
+  render,
+  waitFor,
+  GlobalTestState,
+  unmountComponent,
+} from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
 import { Excalidraw } from "../index";
 import { KEYS } from "../keys";
@@ -63,7 +67,7 @@ const sleep = (ms: number) => {
 };
 
 beforeEach(async () => {
-  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+  unmountComponent();
 
   localStorage.clear();
 

packages/excalidraw/tests/contextmenu.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import {
   render,
   fireEvent,
@@ -11,6 +10,7 @@ import {
   queryAllByText,
   waitFor,
   togglePopover,
+  unmountComponent,
 } from "./test-utils";
 import { Excalidraw } from "../index";
 import * as StaticScene from "../renderer/staticScene";
@@ -38,8 +38,7 @@ const checkpoint = (name: string) => {
 
 const mouse = new Pointer("mouse");
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 beforeEach(() => {

packages/excalidraw/tests/cropElement.test.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { vi } from "vitest";
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import type { ExcalidrawImageElement, ImageCrop } from "../element/types";
-import { act, GlobalTestState, render } from "./test-utils";
+import { act, GlobalTestState, render, unmountComponent } from "./test-utils";
 import { Excalidraw, exportToCanvas, exportToSvg } from "..";
 import { API } from "./helpers/api";
 import type { NormalizedZoomValue } from "../types";
@@ -16,8 +15,7 @@ const { h } = window;
 const mouse = new Pointer("mouse");
 
 beforeEach(async () => {
-  // Unmount ReactDOM from root
-  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+  unmountComponent();
 
   mouse.reset();
   localStorage.clear();

packages/excalidraw/tests/data/__snapshots__/restore.test.ts.snap

@@ -173,7 +173,7 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
-  "height": 0,
+  "height": 100,
   "id": "id-freedraw01",
   "index": "a0",
   "isDeleted": false,
@@ -181,7 +181,16 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "link": null,
   "locked": false,
   "opacity": 100,
-  "points": [],
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      10,
+      10,
+    ],
+  ],
   "pressures": [],
   "roughness": 1,
   "roundness": {
@@ -196,7 +205,7 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "updated": 1,
   "version": 2,
   "versionNonce": Any<Number>,
-  "width": 0,
+  "width": 100,
   "x": 0,
   "y": 0,
 }

packages/excalidraw/tests/data/reconcile.test.ts

@@ -80,9 +80,12 @@ const test = <U extends `${string}:${"L" | "R"}`>(
   const reconciledIds = reconciled.map((x) => x.id);
   const reconciledIndices = reconciled.map((x) => x.index);
 
-  expect(target.length).equal(reconciled.length);
-  expect(reconciledIndices.length).equal(new Set([...reconciledIndices]).size); // expect no duplicated indices
-  expect(reconciledIds).deep.equal(
+  expect(target.length).toEqual(reconciled.length);
+  expect(reconciledIndices.length).toEqual(
+    new Set([...reconciledIndices]).size,
+  ); // expect no duplicated indices
+  assert.deepEqual(
+    reconciledIds,
     target.map((uid) => {
       const [, id, source] = uid.match(/^(\w+):([LR])$/)!;
       const element = (source === "L" ? _local : _remote).find(
@@ -96,13 +99,15 @@ const test = <U extends `${string}:${"L" | "R"}`>(
 
   // convergent reconciliation on the remote client
   try {
-    expect(
+    assert.deepEqual(
       reconcileElements(
         cloneJSON(_remote),
         cloneJSON(_local as RemoteExcalidrawElement[]),
         {} as AppState,
       ).map((x) => x.id),
-    ).deep.equal(reconciledIds, "convergent reconciliation");
+      reconciledIds,
+      "convergent reconciliation",
+    );
   } catch (error: any) {
     console.error("local original", _remote);
     console.error("remote original", _local);
@@ -111,13 +116,15 @@ const test = <U extends `${string}:${"L" | "R"}`>(
 
   // bidirectional re-reconciliation on remote client
   try {
-    expect(
+    assert.deepEqual(
       reconcileElements(
         cloneJSON(_remote),
         cloneJSON(reconciled as unknown as RemoteExcalidrawElement[]),
         {} as AppState,
       ).map((x) => x.id),
-    ).deep.equal(reconciledIds, "local re-reconciliation");
+      reconciledIds,
+      "local re-reconciliation",
+    );
   } catch (error: any) {
     console.error("local original", _remote);
     console.error("remote reconciled", reconciled);
@@ -309,7 +316,10 @@ describe("elements reconciliation", () => {
         throw new Error("reconcileElements: duplicate elements found");
       }
 
-      expect(ret.map((x) => x.id)).to.deep.equal(expected);
+      assert.deepEqual(
+        ret.map((x) => x.id),
+        expected,
+      );
     };
 
     // identical id/version/versionNonce/index

packages/excalidraw/tests/data/restore.test.ts

@@ -13,6 +13,7 @@ import type { NormalizedZoomValue } from "../../types";
 import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "../../constants";
 import { newElementWith } from "../../element/mutateElement";
 import { vi } from "vitest";
+import { pointFrom } from "../../../math";
 
 describe("restoreElements", () => {
   const mockSizeHelper = vi.spyOn(sizeHelpers, "isInvisiblySmallElement");
@@ -103,6 +104,7 @@ describe("restoreElements", () => {
     const freedrawElement = API.createElement({
       type: "freedraw",
       id: "id-freedraw01",
+      points: [pointFrom(0, 0), pointFrom(10, 10)],
     });
 
     const restoredFreedraw = restore.restoreElements(

packages/excalidraw/tests/dragCreate.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { Excalidraw } from "../index";
 import * as StaticScene from "../renderer/staticScene";
 import * as InteractiveScene from "../renderer/interactiveScene";
@@ -9,13 +8,13 @@ import {
   fireEvent,
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
+  unmountComponent,
 } from "./test-utils";
 import type { ExcalidrawLinearElement } from "../element/types";
 import { reseed } from "../random";
 import { vi } from "vitest";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveScene,

packages/excalidraw/tests/elementLocking.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { Excalidraw } from "../index";
-import { render } from "../tests/test-utils";
+import { render, unmountComponent } from "../tests/test-utils";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { KEYS } from "../keys";
 import { API } from "../tests/helpers/api";
@@ -9,7 +8,7 @@ import { actionSelectAll } from "../actions";
 import { t } from "../i18n";
 import { mutateElement } from "../element/mutateElement";
 
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const mouse = new Pointer("mouse");
 const h = window.h;

packages/excalidraw/tests/flip.test.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import {
   fireEvent,
   GlobalTestState,
   render,
   screen,
+  unmountComponent,
   waitFor,
 } from "./test-utils";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
@@ -43,8 +43,7 @@ vi.mock("../data/blob", async (actual) => {
 });
 
 beforeEach(async () => {
-  // Unmount ReactDOM from root
-  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+  unmountComponent();
 
   mouse.reset();
   localStorage.clear();

packages/excalidraw/tests/helpers/api.ts

@@ -189,7 +189,7 @@ export class API {
     containerId?: T extends "text"
       ? ExcalidrawTextElement["containerId"]
       : never;
-    points?: T extends "arrow" | "line" ? readonly LocalPoint[] : never;
+    points?: T extends "arrow" | "line" | "freedraw" ? readonly LocalPoint[] : never;
     locked?: boolean;
     fileId?: T extends "image" ? string : never;
     scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
@@ -228,8 +228,6 @@ export class API {
     const base: Omit<
       ExcalidrawGenericElement,
       | "id"
-      | "width"
-      | "height"
       | "type"
       | "version"
       | "versionNonce"
@@ -241,6 +239,8 @@ export class API {
       seed: 1,
       x,
       y,
+      width,
+      height,
       frameId: rest.frameId ?? null,
       index: rest.index ?? null,
       angle: (rest.angle ?? 0) as Radians,
@@ -272,8 +272,6 @@ export class API {
       case "ellipse":
         element = newElement({
           type: type as "rectangle" | "diamond" | "ellipse",
-          width,
-          height,
           ...base,
         });
         break;
@@ -308,6 +306,7 @@ export class API {
         element = newFreeDrawElement({
           type: type as "freedraw",
           simulatePressure: true,
+          points: rest.points,
           ...base,
         });
         break;

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -12,7 +11,13 @@ import * as StaticScene from "../renderer/staticScene";
 import * as InteractiveCanvas from "../renderer/interactiveScene";
 
 import { Keyboard, Pointer, UI } from "./helpers/ui";
-import { screen, render, fireEvent, GlobalTestState } from "./test-utils";
+import {
+  screen,
+  render,
+  fireEvent,
+  GlobalTestState,
+  unmountComponent,
+} from "./test-utils";
 import { API } from "../tests/helpers/api";
 import { KEYS } from "../keys";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -43,8 +48,7 @@ describe("Test Linear Elements", () => {
   let interactiveCanvas: HTMLCanvasElement;
 
   beforeEach(async () => {
-    // Unmount ReactDOM from root
-    ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+    unmountComponent();
     localStorage.clear();
     renderInteractiveScene.mockClear();
     renderStaticScene.mockClear();

packages/excalidraw/tests/move.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { render, fireEvent, act } from "./test-utils";
+import { render, fireEvent, act, unmountComponent } from "./test-utils";
 import { Excalidraw } from "../index";
 import * as StaticScene from "../renderer/staticScene";
 import * as InteractiveCanvas from "../renderer/interactiveScene";
@@ -16,8 +15,7 @@ import { KEYS } from "../keys";
 import { vi } from "vitest";
 import type Scene from "../scene/Scene";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,

packages/excalidraw/tests/multiPointCreate.test.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import {
   render,
   fireEvent,
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
+  unmountComponent,
 } from "./test-utils";
 import { Excalidraw } from "../index";
 import * as StaticScene from "../renderer/staticScene";
@@ -14,8 +14,7 @@ import type { ExcalidrawLinearElement } from "../element/types";
 import { reseed } from "../random";
 import { vi } from "vitest";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,

packages/excalidraw/tests/regressionTests.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import type { ExcalidrawElement } from "../element/types";
 import { CODES, KEYS } from "../keys";
 import { Excalidraw } from "../index";
@@ -14,6 +13,7 @@ import {
   render,
   screen,
   togglePopover,
+  unmountComponent,
 } from "./test-utils";
 import { FONT_FAMILY } from "../constants";
 import { vi } from "vitest";
@@ -43,8 +43,7 @@ const checkpoint = (name: string) => {
   );
 };
 beforeEach(async () => {
-  // Unmount ReactDOM from root
-  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+  unmountComponent();
 
   localStorage.clear();
   renderStaticScene.mockClear();

packages/excalidraw/tests/resize.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { render } from "./test-utils";
+import { render, unmountComponent } from "./test-utils";
 import { reseed } from "../random";
 import { UI, Keyboard, Pointer } from "./helpers/ui";
 import type {
@@ -21,7 +20,7 @@ import { pointFrom } from "../../math";
 import { resizeSingleElement } from "../element/resizeElements";
 import { getSizeFromPoints } from "../points";
 
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const { h } = window;
 const mouse = new Pointer("mouse");

packages/excalidraw/tests/rotate.test.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { render } from "./test-utils";
+import { render, unmountComponent } from "./test-utils";
 import { reseed } from "../random";
 import { UI } from "./helpers/ui";
 import { Excalidraw } from "../index";
 import { expect } from "vitest";
 
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 beforeEach(() => {
   localStorage.clear();

packages/excalidraw/tests/selection.test.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import {
   render,
   fireEvent,
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
   assertSelectedElements,
+  unmountComponent,
 } from "./test-utils";
 import { Excalidraw } from "../index";
 import * as StaticScene from "../renderer/staticScene";
@@ -17,8 +17,7 @@ import { Keyboard, Pointer, UI } from "./helpers/ui";
 import { SHAPES } from "../shapes";
 import { vi } from "vitest";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,

packages/excalidraw/tests/test-utils.ts

@@ -2,7 +2,13 @@ import "pepjs";
 
 import type { RenderResult, RenderOptions } from "@testing-library/react";
 import { act } from "@testing-library/react";
-import { render, queries, waitFor, fireEvent } from "@testing-library/react";
+import {
+  render,
+  queries,
+  waitFor,
+  fireEvent,
+  cleanup,
+} from "@testing-library/react";
 
 import * as toolQueries from "./queries/toolQueries";
 import type { ImportedDataState } from "../data/types";
@@ -16,6 +22,8 @@ import { ORIG_ID } from "../constants";
 import { arrayToMap } from "../utils";
 import type { AllPossibleKeys } from "../utility-types";
 
+export { cleanup as unmountComponent };
+
 const customQueries = {
   ...queries,
   ...toolQueries,

packages/excalidraw/tests/zindex.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { act, getCloneByOrigId, render } from "./test-utils";
+import { act, getCloneByOrigId, render, unmountComponent } from "./test-utils";
 import { Excalidraw } from "../index";
 import { reseed } from "../random";
 import {
@@ -19,8 +18,7 @@ import type {
   ExcalidrawSelectionElement,
 } from "../element/types";
 
-// Unmount ReactDOM from root
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+unmountComponent();
 
 beforeEach(() => {
   localStorage.clear();