Merge branch 't3chguy/react18/update' of ../matrix-react-sdk into t3c…

…hguy/react18/update # Conflicts: # package.json # src/settings/handlers/AbstractLocalStorageSettingsHandler.ts # test/components/views/elements/SpellCheckLanguagesDropdown-test.tsx # test/components/views/right_panel/LegacyRoomHeaderButtons-test.tsx # test/components/views/right_panel/PinnedMessagesCard-test.tsx # test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap # test/components/views/settings/discovery/EmailAddresses-test.tsx # test/hooks/useNotificationSettings-test.tsx # test/unit-tests/components/structures/UserMenu-test.tsx # test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap # test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx # test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx # test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx # test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx # test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx # test/unit-tests/components/views/elements/Field-test.tsx # test/unit-tests/components/views/elements/SearchWarning-test.tsx # test/unit-tests/components/views/messages/MPollEndBody-test.tsx # test/unit-tests/components/views/polls/pollHistory/PollListItemEnded-test.tsx # test/unit-tests/components/views/right_panel/UserInfo-test.tsx # test/unit-tests/components/views/rooms/MemberList-test.tsx # test/unit-tests/components/views/rooms/MessageComposer-test.tsx # test/unit-tests/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx # test/unit-tests/components/views/rooms/RoomPreviewBar-test.tsx # test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap # test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx # test/unit-tests/components/views/settings/Notifications-test.tsx # test/unit-tests/components/views/settings/SetIntegrationManager-test.tsx # test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx # test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx # test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap # test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap # test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap # test/unit-tests/components/views/spaces/useUnreadThreadRooms-test.tsx # test/unit-tests/hooks/useProfileInfo-test.tsx # test/unit-tests/hooks/usePublicRoomDirectory-test.tsx # test/unit-tests/hooks/useRoomMembers-test.tsx # test/unit-tests/hooks/useSlidingSyncRoomSearch-test.tsx # test/unit-tests/hooks/useUserDirectory-test.tsx # test/unit-tests/hooks/useUserOnboardingTasks-test.tsx # test/unit-tests/hooks/useWindowWidth-test.ts # test/unit-tests/languageHandler-test.tsx # test/unit-tests/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx # yarn.lock
element-hq · Oct 17, 2024 · 8e6a18e · 8e6a18e
2 parents e888c26 + 712ac34
commit 8e6a18e
Show file tree

Hide file tree

Showing 57 changed files with 317 additions and 266 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,6 @@
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
         "@vector-im/compound-web": "^7.0.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -188,9 +187,9 @@
         "@sentry/webpack-plugin": "^2.7.1",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.0.0",
+        "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
-        "@testing-library/user-event": "^14.4.3",
+        "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
         "@types/content-type": "^1.1.5",
         "@types/counterpart": "^0.18.1",
@@ -260,8 +259,8 @@
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
         "jest": "^29.6.2",
+        "jest-environment-jsdom": "^29.7.0",
         "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.6.2",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",

diff --git a/src/@types/react.d.ts b/src/@types/react.d.ts
@@ -13,4 +13,7 @@ declare module "react" {
     function forwardRef<T, P = {}>(
         render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
     ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+    // Fix lazy types - https://stackoverflow.com/a/71017028
+    function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
 }
diff --git a/src/NodeAnimator.tsx b/src/NodeAnimator.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { Key, MutableRefObject, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react";
+import React, { Key, MutableRefObject, ReactElement, ReactInstance } from "react";
 import ReactDom from "react-dom";
 
 interface IChildProps {
@@ -27,7 +27,7 @@ interface IProps {
     innerRef?: MutableRefObject<any>;
 }
 
-function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement {
+function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {
     return typeof c === "object" && "type" in c;
 }
 
@@ -102,7 +102,8 @@ export default class NodeAnimator extends React.Component<IProps> {
     }
 
     private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
-        if (node && this.nodes[k] === undefined && this.props.startStyles.length > 0) {
+        const key = typeof k === "bigint" ? Number(k) : k;
+        if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
             const startStyles = this.props.startStyles;
             const domNode = ReactDom.findDOMNode(node);
             // start from startStyle 1: 0 is the one we gave it
@@ -116,7 +117,7 @@ export default class NodeAnimator extends React.Component<IProps> {
                 this.applyStyles(domNode as HTMLElement, restingStyle);
             }, 0);
         }
-        this.nodes[k] = node;
+        this.nodes[key] = node;
 
         if (this.props.innerRef) {
             this.props.innerRef.current = node;

diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx
@@ -436,7 +436,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
     }
 
     if (shouldWrapInSpan) {
-        return React.createElement("span", null, ...output);
+        return React.createElement("span", null, ...(output as Array<number | string | React.ReactNode>));
     } else {
         return output.join("");
     }

diff --git a/test/setupTests.ts b/test/setupTests.ts
@@ -13,6 +13,13 @@ import { mocked } from "jest-mock";
 
 import { PredictableRandom } from "./test-utils/predictableRandom"; // https://github.com/jsdom/jsdom/issues/2555
 
+declare global {
+    // eslint-disable-next-line no-var
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 // Fake random strings to give a predictable snapshot for IDs
 jest.mock("matrix-js-sdk/src/randomstring");
 beforeEach(() => {

diff --git a/test/test-utils/utilities.ts b/test/test-utils/utilities.ts
@@ -119,7 +119,7 @@ export function untilEmission(
     });
 }
 
-export const flushPromises = async () => await new Promise<void>((resolve) => window.setTimeout(resolve));
+export const flushPromises = async () => await new Promise<void>((resolve) => window.setTimeout(resolve, 10));
 
 // with jest's modern fake timers process.nextTick is also mocked,
 // flushing promises in the normal way then waits for some advancement

diff --git a/test/unit-tests/accessibility/RovingTabIndex-test.tsx b/test/unit-tests/accessibility/RovingTabIndex-test.tsx
@@ -67,6 +67,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active
@@ -135,6 +136,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active

diff --git a/test/unit-tests/components/structures/MatrixChat-test.tsx b/test/unit-tests/components/structures/MatrixChat-test.tsx
@@ -161,7 +161,7 @@ describe("<MatrixChat />", () => {
     let initPromise: Promise<void> | undefined;
     let defaultProps: ComponentProps<typeof MatrixChat>;
     const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) =>
-        render(<MatrixChat {...defaultProps} {...props} />);
+        render(<MatrixChat {...defaultProps} {...props} />, { legacyRoot: true });
 
     // make test results readable
     filterConsole(

diff --git a/test/unit-tests/components/structures/RoomView-test.tsx b/test/unit-tests/components/structures/RoomView-test.tsx
@@ -137,6 +137,9 @@ describe("RoomView", () => {
                     wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;
@@ -174,6 +177,9 @@ describe("RoomView", () => {
                     onRegistered={jest.fn()}
                 />
             </SDKContext.Provider>,
+            {
+                legacyRoot: true,
+            },
         );
         await flushPromises();
         return roomView;

diff --git a/test/unit-tests/components/structures/TimelinePanel-test.tsx b/test/unit-tests/components/structures/TimelinePanel-test.tsx
@@ -203,6 +203,7 @@ describe("TimelinePanel", () => {
                     manageReadReceipts={true}
                     ref={ref}
                 />,
+                { legacyRoot: true },
             );
             await flushPromises();
             timelinePanel = ref.current!;

diff --git a/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx b/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx
@@ -94,6 +94,7 @@ describe("<ForgotPassword>", () => {
         beforeEach(() => {
             renderResult = render(
                 <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
+                { legacyRoot: true },
             );
         });
 

diff --git a/test/unit-tests/components/structures/auth/Login-test.tsx b/test/unit-tests/components/structures/auth/Login-test.tsx
@@ -89,7 +89,7 @@ describe("Login", function () {
     }
 
     function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: OidcClientConfig) {
-        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication));
+        return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication), { legacyRoot: true });
     }
 
     it("should show form with change server link", async () => {
@@ -350,7 +350,9 @@ describe("Login", function () {
             unstable_features: {},
             versions: ["v1.1"],
         });
-        const { rerender } = render(getRawComponent());
+        const { rerender } = render(getRawComponent(), {
+            legacyRoot: true,
+        });
         await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading…"));
 
         // error displayed

diff --git a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -47,9 +47,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 32px;"
-        >
-          
-        </span>
+        />
         <div
           class="mx_BeaconListItem_info"
         >