Improve randomString mock for better snapshots (#11375)

jest.config.ts

@@ -21,9 +21,9 @@ import type { Config } from "jest";
 const config: Config = {
     testEnvironment: "jsdom",
     testMatch: ["<rootDir>/test/**/*-test.[jt]s?(x)"],
-    globalSetup: "<rootDir>/test/globalSetup.js",
+    globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock"],
-    setupFilesAfterEnv: ["<rootDir>/test/setupTests.js"],
+    setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",

test/components/structures/RoomView-test.tsx

@@ -67,11 +67,6 @@ import { WidgetType } from "../../../src/widgets/WidgetType";
 import WidgetStore from "../../../src/stores/WidgetStore";
 import { ViewRoomErrorPayload } from "../../../src/dispatcher/payloads/ViewRoomErrorPayload";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 const RoomView = wrapInMatrixClientContext(_RoomView);
 
 describe("RoomView", () => {

test/components/structures/SpaceHierarchy-test.tsx

@@ -30,11 +30,6 @@ import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import SettingsStore from "../../../src/settings/SettingsStore";
 
-// Fake random strings to give a predictable snapshot for checkbox IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("SpaceHierarchy", () => {
     describe("showRoom", () => {
         let client: MatrixClient;

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -54,7 +54,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
           </div>
         </div>
         <div
-          aria-describedby="mx_TooltipTarget_abdefghi"
+          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -147,7 +147,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           </div>
         </div>
         <div
-          aria-describedby="mx_TooltipTarget_abdefghi"
+          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -337,7 +337,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
           </div>
         </div>
         <div
-          aria-describedby="mx_TooltipTarget_abdefghi"
+          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -606,7 +606,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           </div>
         </div>
         <div
-          aria-describedby="mx_TooltipTarget_abdefghi"
+          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -117,12 +117,12 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
           >
             <input
-              id="checkbox_abdefghi"
+              id="checkbox_vY7Q4uEh9K"
               tabindex="0"
               type="checkbox"
             />
             <label
-              for="checkbox_abdefghi"
+              for="checkbox_vY7Q4uEh9K"
             >
               <div
                 class="mx_Checkbox_background"
@@ -198,12 +198,12 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
           >
             <input
-              id="checkbox_abdefghi"
+              id="checkbox_38QgU2Pomx"
               tabindex="-1"
               type="checkbox"
             />
             <label
-              for="checkbox_abdefghi"
+              for="checkbox_38QgU2Pomx"
             >
               <div
                 class="mx_Checkbox_background"
@@ -280,12 +280,12 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
           >
             <input
-              id="checkbox_abdefghi"
+              id="checkbox_wKpa6hpi3Y"
               tabindex="-1"
               type="checkbox"
             />
             <label
-              for="checkbox_abdefghi"
+              for="checkbox_wKpa6hpi3Y"
             >
               <div
                 class="mx_Checkbox_background"
@@ -365,7 +365,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <div
-            aria-describedby="mx_TooltipTarget_abdefghi"
+            aria-describedby="mx_TooltipTarget_EetmBG4y"
             class="mx_TextWithTooltip_target"
             tabindex="0"
           >
@@ -374,12 +374,12 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             >
               <input
                 disabled=""
-                id="checkbox_abdefghi"
+                id="checkbox_VCeEefiPqp"
                 tabindex="-1"
                 type="checkbox"
               />
               <label
-                for="checkbox_abdefghi"
+                for="checkbox_VCeEefiPqp"
               >
                 <div
                   class="mx_Checkbox_background"

test/components/views/beacon/BeaconListItem-test.tsx

@@ -28,11 +28,6 @@ import {
     makeRoomWithBeacons,
 } from "../../../test-utils";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<BeaconListItem />", () => {
     // 14.03.2022 16:15
     const now = 1647270879403;

test/components/views/beacon/DialogSidebar-test.tsx

@@ -27,11 +27,6 @@ import {
     mockClientMethodsUser,
 } from "../../../test-utils";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<DialogSidebar />", () => {
     const defaultProps: ComponentProps<typeof DialogSidebar> = {
         beacons: [],

test/components/views/beacon/ShareLatestLocation-test.tsx

@@ -21,11 +21,6 @@ import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLa
 import { copyPlaintext } from "../../../../src/utils/strings";
 import { flushPromises } from "../../../test-utils";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 jest.mock("../../../../src/utils/strings", () => ({
     copyPlaintext: jest.fn().mockResolvedValue(undefined),
 }));

test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <div
-            aria-describedby="mx_TooltipTarget_abdefghi"
+            aria-describedby="mx_TooltipTarget_vY7Q4uEh"
             tabindex="0"
           >
             <a

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -62,7 +62,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <div
-                aria-describedby="mx_TooltipTarget_abdefghi"
+                aria-describedby="mx_TooltipTarget_vY7Q4uEh"
                 tabindex="0"
               >
                 <a

test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="mx_TooltipTarget_abdefghi"
+    aria-describedby="mx_TooltipTarget_vY7Q4uEh"
     tabindex="0"
   >
     <a

test/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx

@@ -23,13 +23,6 @@ import ManageRestrictedJoinRuleDialog from "../../../../src/components/views/dia
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => {
-    return {
-        randomString: () => "abdefghi",
-    };
-});
-
 describe("<ManageRestrictedJoinRuleDialog />", () => {
     const userId = "@alice:server.org";
     const mockClient = getMockClientWithEventEmitter({

test/components/views/dialogs/ServerPickerDialog-test.tsx

@@ -23,11 +23,6 @@ import SdkConfig from "../../../../src/SdkConfig";
 import { flushPromises } from "../../../test-utils";
 import { ValidatedServerConfig } from "../../../../src/utils/ValidatedServerConfig";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<ServerPickerDialog />", () => {
     const defaultServerConfig = {
         hsUrl: "https://matrix.org",

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -107,11 +107,11 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
             class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
           >
             <input
-              id="checkbox_abdefghi"
+              id="checkbox_vY7Q4uEh9K"
               type="checkbox"
             />
             <label
-              for="checkbox_abdefghi"
+              for="checkbox_vY7Q4uEh9K"
             >
               <div
                 class="mx_Checkbox_background"

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -56,7 +56,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
           class="mx_StyledRadioButton_content"
         >
           <div
-            aria-describedby="mx_TooltipTarget_abdefghi"
+            aria-describedby="mx_TooltipTarget_vY7Q4uEh"
             class="mx_TextWithTooltip_target mx_Login_underlinedServerName"
             tabindex="0"
           >

test/components/views/elements/AppTile-test.tsx

@@ -61,11 +61,6 @@ jest.mock("../../../../src/stores/OwnProfileStore", () => ({
     },
 }));
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("AppTile", () => {
     let cli: MatrixClient;
     let r1: Room;

test/components/views/elements/LabelledCheckbox-test.tsx

@@ -19,13 +19,6 @@ import React from "react";
 
 import LabelledCheckbox from "../../../../src/components/views/elements/LabelledCheckbox";
 
-// Fake random strings to give a predictable snapshot for checkbox IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => {
-    return {
-        randomString: () => "abdefghi",
-    };
-});
-
 describe("<LabelledCheckbox />", () => {
     type CompProps = React.ComponentProps<typeof LabelledCheckbox>;
     const getComponent = (props: CompProps) => <LabelledCheckbox {...props} />;

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -276,7 +276,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby="mx_TooltipTarget_abdefghi"
+                aria-describedby="mx_TooltipTarget_vY7Q4uEh"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
                 tabindex="0"
               >

test/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap

@@ -10,11 +10,11 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
     >
       <input
         checked=""
-        id="checkbox_abdefghi"
+        id="checkbox_vY7Q4uEh9K"
         type="checkbox"
       />
       <label
-        for="checkbox_abdefghi"
+        for="checkbox_vY7Q4uEh9K"
       >
         <div
           class="mx_Checkbox_background"
@@ -53,11 +53,11 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
     >
       <input
         checked=""
-        id="checkbox_abdefghi"
+        id="checkbox_vY7Q4uEh9K"
         type="checkbox"
       />
       <label
-        for="checkbox_abdefghi"
+        for="checkbox_vY7Q4uEh9K"
       >
         <div
           class="mx_Checkbox_background"

test/components/views/location/LocationShareMenu-test.tsx

@@ -70,11 +70,6 @@ jest.mock("../../../../src/Modal", () => ({
     ModalManagerEvent: { Opened: "opened" },
 }));
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<LocationShareMenu />", () => {
     const userId = "@ernie:server.org";
     const mockClient = getMockClientWithEventEmitter({

test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
       class="mx_SettingsFlag_label"
     >
       <div
-        id="mx_LabelledToggleSwitch_abdefghi"
+        id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       >
         Enable live location sharing
       </div>
@@ -34,7 +34,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <div
       aria-checked="false"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_abdefghi"
+      aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"

test/components/views/messages/MLocationBody-test.tsx

@@ -32,13 +32,6 @@ import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
 import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => {
-    return {
-        randomString: () => "abdefghi",
-    };
-});
-
 describe("MLocationBody", () => {
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     describe("<MLocationBody>", () => {

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -34,17 +34,17 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
     class="mx_MLocationBody"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_9K38QgU2"
       tabindex="0"
     >
       <div
         class="mx_Map mx_MLocationBody_map"
-        id="mx_Map_mx_MLocationBody_$2_abdefghi"
+        id="mx_Map_mx_MLocationBody_$2_vY7Q4uEh"
       >
         <span>
           <div
             class="mx_Marker mx_Marker_defaultColor"
-            id="mx_MLocationBody_$2_abdefghi-marker"
+            id="mx_MLocationBody_$2_vY7Q4uEh-marker"
           >
             <div
               class="mx_Marker_border"
@@ -67,17 +67,17 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
     class="mx_MLocationBody"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_9K38QgU2"
       tabindex="0"
     >
       <div
         class="mx_Map mx_MLocationBody_map"
-        id="mx_Map_mx_MLocationBody_$3_abdefghi"
+        id="mx_Map_mx_MLocationBody_$3_vY7Q4uEh"
       >
         <span>
           <div
             class="mx_Marker mx_Marker_defaultColor"
-            id="mx_MLocationBody_$3_abdefghi-marker"
+            id="mx_MLocationBody_$3_vY7Q4uEh-marker"
           >
             <div
               class="mx_Marker_border"

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -36,11 +36,6 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<PollHistory />", () => {
     // 14.03.2022 16:15
     const now = 1647270879403;

test/components/views/polls/pollHistory/PollListItem-test.tsx

@@ -21,11 +21,6 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
 import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<PollListItem />", () => {
     const event = makePollStartEvent("Question?", "@me:domain.org");
     event.getContent().origin;

test/components/views/polls/pollHistory/PollListItemEnded-test.tsx

@@ -32,11 +32,6 @@ import {
     unmockIntlDateTimeFormat,
 } from "../../../../test-utils";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<PollListItemEnded />", () => {
     const userId = "@alice:domain.org";
     const roomId = "!room:domain.org";

test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -79,7 +79,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$2"
         >
           <div
-            aria-describedby="mx_TooltipTarget_abdefghi"
+            aria-describedby="mx_TooltipTarget_PomxwKpa"
             tabindex="0"
           >
             <div
@@ -104,7 +104,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$1"
         >
           <div
-            aria-describedby="mx_TooltipTarget_abdefghi"
+            aria-describedby="mx_TooltipTarget_tmBG4yVC"
             tabindex="0"
           >
             <div

test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
     data-testid="pollListItem-$mypoll"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
       tabindex="0"
     >
       <div

test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     data-testid="pollListItem-1"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
       tabindex="0"
     >
       <div

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -32,11 +32,6 @@ import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../t
 import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 
-// Fake random strings to give a predictable snapshot for checkbox IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<RoomSummaryCard />", () => {
     const userId = "@alice:domain.org";
     const mockClient = getMockClientWithEventEmitter({

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -41,7 +41,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           />
         </span>
         <div
-          aria-describedby="mx_TooltipTarget_abdefghi"
+          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
           class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
           tabindex="0"
         />

test/components/views/settings/FontScalingPanel-test.tsx

@@ -21,13 +21,6 @@ import * as TestUtils from "../../../test-utils";
 import FontScalingPanel from "../../../../src/components/views/settings/FontScalingPanel";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => {
-    return {
-        randomString: () => "abdefghi",
-    };
-});
-
 describe("FontScalingPanel", () => {
     it("renders the font scaling UI", () => {
         TestUtils.stubClient();

test/components/views/settings/Notifications-test.tsx

@@ -45,11 +45,6 @@ jest.mock("matrix-js-sdk/src/logger");
 // Avoid indirectly importing any eagerly created stores that would require extra setup
 jest.mock("../../../../src/Notifier");
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: jest.fn(),
-}));
-
 const masterRule: IPushRule = {
     actions: [PushRuleActionName.DontNotify],
     conditions: [],

test/components/views/settings/ThemeChoicePanel-test.tsx

@@ -20,13 +20,6 @@ import { render } from "@testing-library/react";
 import * as TestUtils from "../../../test-utils";
 import ThemeChoicePanel from "../../../../src/components/views/settings/ThemeChoicePanel";
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => {
-    return {
-        randomString: () => "abdefghi",
-    };
-});
-
 describe("ThemeChoicePanel", () => {
     it("renders the theme choice UI", () => {
         TestUtils.stubClient();

test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

@@ -74,11 +74,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
         class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
       >
         <input
-          id="checkbox_abdefghi"
+          id="checkbox_vY7Q4uEh9K"
           type="checkbox"
         />
         <label
-          for="checkbox_abdefghi"
+          for="checkbox_vY7Q4uEh9K"
         >
           <div
             class="mx_Checkbox_background"

test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx

@@ -19,11 +19,6 @@ import React from "react";
 
 import FilteredDeviceListHeader from "../../../../../src/components/views/settings/devices/FilteredDeviceListHeader";
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<FilteredDeviceListHeader />", () => {
     const defaultProps = {
         selectedDeviceCount: 0,

test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
     data-testid="test123"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
       tabindex="0"
     >
       <span
@@ -52,7 +52,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
     data-testid="test123"
   >
     <div
-      aria-describedby="mx_TooltipTarget_abdefghi"
+      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
       tabindex="0"
     >
       <span

test/components/views/settings/notifications/Notifications2-test.tsx

@@ -22,26 +22,9 @@ import NotificationSettings2 from "../../../../../src/components/views/settings/
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { StandardActions } from "../../../../../src/notifications/StandardActions";
-import { PredictableRandom } from "../../../../predictableRandom";
 import { mkMessage, stubClient } from "../../../../test-utils";
 import Mock = jest.Mock;
 
-const mockRandom = new PredictableRandom();
-
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: jest.fn((len): string => {
-        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        let ret = "";
-
-        for (let i = 0; i < len; ++i) {
-            ret += chars.charAt(Math.floor(mockRandom.get() * chars.length));
-        }
-
-        return ret;
-    }),
-}));
-
 const waitForUpdate = (): Promise<void> => new Promise((resolve) => setTimeout(resolve));
 
 const labelGlobalMute = "Enable notifications for this account";
@@ -80,8 +63,6 @@ describe("<Notifications />", () => {
         cli.deletePushRule = jest.fn(cli.deletePushRule).mockResolvedValue({});
         cli.removePusher = jest.fn(cli.removePusher).mockResolvedValue({});
         cli.setPusher = jest.fn(cli.setPusher).mockResolvedValue({});
-
-        mockRandom.reset();
     });
 
     it("matches the snapshot", async () => {

test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_7Qu"
+                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
               </div>
@@ -34,7 +34,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="true"
-              aria-labelledby="mx_LabelledToggleSwitch_7Qu"
+              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
               role="switch"
               tabindex="0"
@@ -51,7 +51,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_QUoKa"
+                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
               </div>
@@ -59,7 +59,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QUoKa"
+              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -76,7 +76,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_eB"
+                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
               </div>
@@ -84,7 +84,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_eB"
+              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -101,7 +101,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_yfi"
+                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
               </div>
@@ -109,7 +109,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_yfi"
+              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -246,11 +246,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_MRMG"
+                  id="checkbox_MRMwbPDmfG"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_MRMG"
+                  for="checkbox_MRMwbPDmfG"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -280,11 +280,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_W9"
+                  id="checkbox_tmGQvdMWe9"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_W9"
+                  for="checkbox_tmGQvdMWe9"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -314,11 +314,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_A5Cs"
+                  id="checkbox_54DVIAu5Cs"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_A5Cs"
+                  for="checkbox_54DVIAu5Cs"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -365,11 +365,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_RDn"
+                  id="checkbox_iHRD7nyrA2"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_RDn"
+                  for="checkbox_iHRD7nyrA2"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -398,11 +398,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               >
                 <input
                   disabled=""
-                  id="checkbox_jV"
+                  id="checkbox_ohjWVJIPau"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_jV"
+                  for="checkbox_ohjWVJIPau"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -432,11 +432,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_1Oid"
+                  id="checkbox_y1OmnTidX4"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_1Oid"
+                  for="checkbox_y1OmnTidX4"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -504,11 +504,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_PW"
+                  id="checkbox_ePDS0OpWwA"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_PW"
+                  for="checkbox_ePDS0OpWwA"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -538,11 +538,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_N"
+                  id="checkbox_HG75JNTNkN"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_N"
+                  for="checkbox_HG75JNTNkN"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -572,11 +572,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_4rTRs"
+                  id="checkbox_U64raTLcRs"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_4rTRs"
+                  for="checkbox_U64raTLcRs"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -745,7 +745,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_7Qu"
+                id="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               >
                 Enable notifications for this account
               </div>
@@ -753,7 +753,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_7Qu"
+              aria-labelledby="mx_LabelledToggleSwitch_vY7Q4uEh9K38"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -770,7 +770,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_QUoKa"
+                id="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               >
                 Enable desktop notifications for this session
               </div>
@@ -778,7 +778,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_QUoKa"
+              aria-labelledby="mx_LabelledToggleSwitch_QgU2PomxwKpa"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -795,7 +795,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_eB"
+                id="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               >
                 Show message preview in desktop notification
               </div>
@@ -803,7 +803,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_eB"
+              aria-labelledby="mx_LabelledToggleSwitch_6hpi3YEetmBG"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -820,7 +820,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_yfi"
+                id="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               >
                 Enable audible notifications for this session
               </div>
@@ -828,7 +828,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_yfi"
+              aria-labelledby="mx_LabelledToggleSwitch_4yVCeEefiPqp"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -961,11 +961,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_MRMG"
+                  id="checkbox_MRMwbPDmfG"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_MRMG"
+                  for="checkbox_MRMwbPDmfG"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -994,11 +994,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_W9"
+                  id="checkbox_tmGQvdMWe9"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_W9"
+                  for="checkbox_tmGQvdMWe9"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1027,11 +1027,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_A5Cs"
+                  id="checkbox_54DVIAu5Cs"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_A5Cs"
+                  for="checkbox_54DVIAu5Cs"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1077,11 +1077,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_RDn"
+                  id="checkbox_iHRD7nyrA2"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_RDn"
+                  for="checkbox_iHRD7nyrA2"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1109,11 +1109,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_jV"
+                  id="checkbox_ohjWVJIPau"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_jV"
+                  for="checkbox_ohjWVJIPau"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1142,11 +1142,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_1Oid"
+                  id="checkbox_y1OmnTidX4"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_1Oid"
+                  for="checkbox_y1OmnTidX4"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1213,11 +1213,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_PW"
+                  id="checkbox_ePDS0OpWwA"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_PW"
+                  for="checkbox_ePDS0OpWwA"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1246,11 +1246,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_N"
+                  id="checkbox_HG75JNTNkN"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_N"
+                  for="checkbox_HG75JNTNkN"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1279,11 +1279,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               >
                 <input
                   checked=""
-                  id="checkbox_4rTRs"
+                  id="checkbox_U64raTLcRs"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_4rTRs"
+                  for="checkbox_U64raTLcRs"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -1523,11 +1523,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
                 >
                   <input
-                    id="checkbox_Yn"
+                    id="checkbox_QRlYy75nfv"
                     type="checkbox"
                   />
                   <label
-                    for="checkbox_Yn"
+                    for="checkbox_QRlYy75nfv"
                   >
                     <div
                       class="mx_Checkbox_background"

test/components/views/settings/tabs/user/AppearanceUserSettingsTab-test.tsx

@@ -21,11 +21,6 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import AppearanceUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/AppearanceUserSettingsTab";
 import { withClientContextRenderOptions, stubClient } from "../../../../../test-utils";
 
-// Fake random strings to give a predictable snapshot
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("AppearanceUserSettingsTab", () => {
     let client: MatrixClient;
 

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -54,11 +54,6 @@ import { getClientInformationEventType } from "../../../../../../src/utils/devic
 
 mockPlatformPeg();
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: () => "abdefghi",
-}));
-
 describe("<SessionManagerTab />", () => {
     const aliceId = "@alice:server.org";
     const deviceId = "alices_device";

test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx

@@ -24,12 +24,6 @@ import { MetaSpace } from "../../../../../../src/stores/spaces";
 import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
 import { flushPromises } from "../../../../../test-utils";
 
-// used by checkbox to relate labels to inputs
-// make it stable for snapshot testing
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: jest.fn().mockReturnValue("abcd"),
-}));
-
 describe("<SidebarUserSettingsTab />", () => {
     beforeEach(() => {
         jest.spyOn(PosthogTrackers, "trackInteraction").mockClear();

test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -303,11 +303,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_abdefghi"
+                  id="checkbox_vY7Q4uEh9K"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abdefghi"
+                  for="checkbox_vY7Q4uEh9K"
                 >
                   <div
                     class="mx_Checkbox_background"

test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -328,7 +328,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
   class="mx_FilteredDeviceListHeader"
 >
   <div
-    aria-describedby="mx_TooltipTarget_abdefghi"
+    aria-describedby="mx_TooltipTarget_vY7Q4uEh"
     tabindex="0"
   >
     <span

test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -49,11 +49,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
                 <input
                   checked=""
                   disabled=""
-                  id="checkbox_abcd"
+                  id="checkbox_vY7Q4uEh9K"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abcd"
+                  for="checkbox_vY7Q4uEh9K"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -82,11 +82,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
               >
                 <input
                   data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
-                  id="checkbox_abcd"
+                  id="checkbox_38QgU2Pomx"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abcd"
+                  for="checkbox_38QgU2Pomx"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -113,11 +113,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
                 class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_abcd"
+                  id="checkbox_wKpa6hpi3Y"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abcd"
+                  for="checkbox_wKpa6hpi3Y"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -145,11 +145,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
                 class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_abcd"
+                  id="checkbox_EetmBG4yVC"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abcd"
+                  for="checkbox_EetmBG4yVC"
                 >
                   <div
                     class="mx_Checkbox_background"
@@ -177,11 +177,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
                 class="mx_Checkbox mx_SidebarUserSettingsTab_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
               >
                 <input
-                  id="checkbox_abcd"
+                  id="checkbox_eEefiPqpMR"
                   type="checkbox"
                 />
                 <label
-                  for="checkbox_abcd"
+                  for="checkbox_eEefiPqpMR"
                 >
                   <div
                     class="mx_Checkbox_background"

test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -32,11 +32,6 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 
 const SpaceSettingsVisibilityTab = wrapInMatrixClientContext(_SpaceSettingsVisibilityTab);
 
-// Fake random strings to give a predictable snapshot for IDs
-jest.mock("matrix-js-sdk/src/randomstring", () => ({
-    randomString: jest.fn(),
-}));
-
 jest.useFakeTimers();
 
 describe("<SpaceSettingsVisibilityTab />", () => {

test/setupTests.ts

@@ -15,7 +15,27 @@ limitations under the License.
 */
 
 import "@testing-library/jest-dom";
-import "blob-polyfill"; // https://github.com/jsdom/jsdom/issues/2555
+import "blob-polyfill";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+import { mocked } from "jest-mock";
+
+import { PredictableRandom } from "./predictableRandom"; // https://github.com/jsdom/jsdom/issues/2555
+
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring");
+beforeEach(() => {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const mockRandom = new PredictableRandom();
+    mocked(randomString).mockImplementation((len) => {
+        let ret = "";
+        for (let i = 0; i < len; ++i) {
+            const v = mockRandom.get() * chars.length;
+            const m = ((v % chars.length) + chars.length) % chars.length; // account for negative modulo
+            ret += chars.charAt(Math.floor(m));
+        }
+        return ret;
+    });
+});
 
 // Very carefully enable the mocks for everything else in
 // a specific order. We use this order to ensure we properly

test/utils/oidc/authorize-test.ts

@@ -23,6 +23,8 @@ import { mocked } from "jest-mock";
 import { completeOidcLogin, startOidcLogin } from "../../../src/utils/oidc/authorize";
 import { makeDelegatedAuthConfig } from "../../test-utils/oidc";
 
+jest.unmock("matrix-js-sdk/src/randomstring");
+
 jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
     ...jest.requireActual("matrix-js-sdk/src/oidc/authorize"),
     completeAuthorizationCodeGrant: jest.fn(),