From 57a0d99dc851fed6ca6610967231ba3e39b14954 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 9 Aug 2023 09:39:48 +0100
Subject: [PATCH] Improve randomString mock for better snapshots (#11375)

---
 jest.config.ts                                |   4 +-
 test/components/structures/RoomView-test.tsx  |   5 -
 .../structures/SpaceHierarchy-test.tsx        |   5 -
 .../__snapshots__/RoomView-test.tsx.snap      |   8 +-
 .../SpaceHierarchy-test.tsx.snap              |  18 +--
 .../views/beacon/BeaconListItem-test.tsx      |   5 -
 .../views/beacon/DialogSidebar-test.tsx       |   5 -
 .../views/beacon/ShareLatestLocation-test.tsx |   5 -
 .../BeaconListItem-test.tsx.snap              |   2 +-
 .../__snapshots__/DialogSidebar-test.tsx.snap |   2 +-
 .../ShareLatestLocation-test.tsx.snap         |   2 +-
 .../ManageRestrictedJoinRuleDialog-test.tsx   |   7 --
 .../views/dialogs/ServerPickerDialog-test.tsx |   5 -
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |   4 +-
 .../ServerPickerDialog-test.tsx.snap          |   2 +-
 .../views/elements/AppTile-test.tsx           |   5 -
 .../views/elements/LabelledCheckbox-test.tsx  |   7 --
 .../__snapshots__/AppTile-test.tsx.snap       |   2 +-
 .../LabelledCheckbox-test.tsx.snap            |   8 +-
 .../views/location/LocationShareMenu-test.tsx |   5 -
 .../LocationShareMenu-test.tsx.snap           |   4 +-
 .../views/messages/MLocationBody-test.tsx     |   7 --
 .../__snapshots__/MLocationBody-test.tsx.snap |  12 +-
 .../polls/pollHistory/PollHistory-test.tsx    |   5 -
 .../polls/pollHistory/PollListItem-test.tsx   |   5 -
 .../pollHistory/PollListItemEnded-test.tsx    |   5 -
 .../__snapshots__/PollHistory-test.tsx.snap   |   4 +-
 .../__snapshots__/PollListItem-test.tsx.snap  |   2 +-
 .../PollListItemEnded-test.tsx.snap           |   2 +-
 .../right_panel/RoomSummaryCard-test.tsx      |   5 -
 .../RoomSummaryCard-test.tsx.snap             |   2 +-
 .../views/settings/FontScalingPanel-test.tsx  |   7 --
 .../views/settings/Notifications-test.tsx     |   5 -
 .../views/settings/ThemeChoicePanel-test.tsx  |   7 --
 .../FontScalingPanel-test.tsx.snap            |   4 +-
 .../devices/FilteredDeviceListHeader-test.tsx |   5 -
 .../FilteredDeviceListHeader-test.tsx.snap    |   4 +-
 .../notifications/Notifications2-test.tsx     |  19 ---
 .../Notifications2-test.tsx.snap              | 108 +++++++++---------
 .../user/AppearanceUserSettingsTab-test.tsx   |   5 -
 .../tabs/user/SessionManagerTab-test.tsx      |   5 -
 .../tabs/user/SidebarUserSettingsTab-test.tsx |   6 -
 .../AppearanceUserSettingsTab-test.tsx.snap   |   4 +-
 .../SessionManagerTab-test.tsx.snap           |   2 +-
 .../SidebarUserSettingsTab-test.tsx.snap      |  20 ++--
 .../SpaceSettingsVisibilityTab-test.tsx       |   5 -
 test/{globalSetup.js => globalSetup.ts}       |   0
 test/{setupTests.js => setupTests.ts}         |  22 +++-
 test/utils/oidc/authorize-test.ts             |   2 +
 49 files changed, 133 insertions(+), 256 deletions(-)
 rename test/{globalSetup.js => globalSetup.ts} (100%)
 rename test/{setupTests.js => setupTests.ts} (53%)

diff --git a/jest.config.ts b/jest.config.ts
index 818a164ddd..d7f00f194e 100644
--- a/jest.config.ts
+++ b/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",
diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx
index 8a9e385e8b..3d3fab4482 100644
--- a/test/components/structures/RoomView-test.tsx
+++ b/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", () => {
diff --git a/test/components/structures/SpaceHierarchy-test.tsx b/test/components/structures/SpaceHierarchy-test.tsx
index 685fbc7d0d..5e414f5111 100644
--- a/test/components/structures/SpaceHierarchy-test.tsx
+++ b/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;
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index c0a2989f96..3a65706ef0 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/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"
diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index ea82ff880e..12caa516cf 100644
--- a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/beacon/BeaconListItem-test.tsx b/test/components/views/beacon/BeaconListItem-test.tsx
index aa3d4a183b..cab8da30a0 100644
--- a/test/components/views/beacon/BeaconListItem-test.tsx
+++ b/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;
diff --git a/test/components/views/beacon/DialogSidebar-test.tsx b/test/components/views/beacon/DialogSidebar-test.tsx
index 6e8a0d8999..a0def1f445 100644
--- a/test/components/views/beacon/DialogSidebar-test.tsx
+++ b/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: [],
diff --git a/test/components/views/beacon/ShareLatestLocation-test.tsx b/test/components/views/beacon/ShareLatestLocation-test.tsx
index 995fe7d3e3..654b3dc73a 100644
--- a/test/components/views/beacon/ShareLatestLocation-test.tsx
+++ b/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),
 }));
diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index 9b924345aa..364e65adab 100644
--- a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/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
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 8b3eacdc3a..4c7d979c07 100644
--- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/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
diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index 7ac293dd29..de383158cb 100644
--- a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/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
diff --git a/test/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx b/test/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx
index 01ae855ac6..0605b8f9e2 100644
--- a/test/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx
+++ b/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({
diff --git a/test/components/views/dialogs/ServerPickerDialog-test.tsx b/test/components/views/dialogs/ServerPickerDialog-test.tsx
index 759dadf900..c5aaf0d612 100644
--- a/test/components/views/dialogs/ServerPickerDialog-test.tsx
+++ b/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",
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 61ef721c31..36bd895304 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index 7f16d4ee59..dce2ee012a 100644
--- a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/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"
           >
diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx
index 26dc97f41c..f15f0ce560 100644
--- a/test/components/views/elements/AppTile-test.tsx
+++ b/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;
diff --git a/test/components/views/elements/LabelledCheckbox-test.tsx b/test/components/views/elements/LabelledCheckbox-test.tsx
index 857fcdf1fe..c619794d90 100644
--- a/test/components/views/elements/LabelledCheckbox-test.tsx
+++ b/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} />;
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index 843ee980e1..f514cb1433 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/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"
               >
diff --git a/test/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/test/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index 0ce152015e..dce0a4011a 100644
--- a/test/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx
index a5510712ff..ffee8dff60 100644
--- a/test/components/views/location/LocationShareMenu-test.tsx
+++ b/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({
diff --git a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index e83d959d5c..6bf73720a5 100644
--- a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/messages/MLocationBody-test.tsx b/test/components/views/messages/MLocationBody-test.tsx
index f17e71b5b2..70f8b95a7f 100644
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/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>", () => {
diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index d69bd93168..68a905acfa 100644
--- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/polls/pollHistory/PollHistory-test.tsx b/test/components/views/polls/pollHistory/PollHistory-test.tsx
index 6dd399009c..b1de79b2d9 100644
--- a/test/components/views/polls/pollHistory/PollHistory-test.tsx
+++ b/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;
diff --git a/test/components/views/polls/pollHistory/PollListItem-test.tsx b/test/components/views/polls/pollHistory/PollListItem-test.tsx
index 40ecb33d78..b48cddb8d8 100644
--- a/test/components/views/polls/pollHistory/PollListItem-test.tsx
+++ b/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;
diff --git a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx b/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
index c3a9f8ffda..9ba284bc6c 100644
--- a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx
+++ b/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";
diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
index 0784669076..a5b8d78f0f 100644
--- a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
+++ b/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
diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
index cdc1427ade..d4a916358c 100644
--- a/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
+++ b/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
diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
index 19d346f67c..4bf25d7b2f 100644
--- a/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
+++ b/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
diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx
index 61df95bc17..7661cbc277 100644
--- a/test/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/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({
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 146f6994ec..6bc279559f 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/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"
         />
diff --git a/test/components/views/settings/FontScalingPanel-test.tsx b/test/components/views/settings/FontScalingPanel-test.tsx
index 2c8333e454..deb8df3c50 100644
--- a/test/components/views/settings/FontScalingPanel-test.tsx
+++ b/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();
diff --git a/test/components/views/settings/Notifications-test.tsx b/test/components/views/settings/Notifications-test.tsx
index 523e89443c..685e062767 100644
--- a/test/components/views/settings/Notifications-test.tsx
+++ b/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: [],
diff --git a/test/components/views/settings/ThemeChoicePanel-test.tsx b/test/components/views/settings/ThemeChoicePanel-test.tsx
index ce36778231..03bbdbafdb 100644
--- a/test/components/views/settings/ThemeChoicePanel-test.tsx
+++ b/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();
diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index 91aabf7e35..58aff6595b 100644
--- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
index 1b7a6c3079..05380493d3 100644
--- a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
+++ b/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,
diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index 9acbfbb9a8..6956ffe0f1 100644
--- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/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
diff --git a/test/components/views/settings/notifications/Notifications2-test.tsx b/test/components/views/settings/notifications/Notifications2-test.tsx
index 11030abc41..7cbe432eaa 100644
--- a/test/components/views/settings/notifications/Notifications2-test.tsx
+++ b/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 () => {
diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 8a26524dbe..5c75d69e0b 100644
--- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/settings/tabs/user/AppearanceUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/AppearanceUserSettingsTab-test.tsx
index 0596652cf6..597d6678df 100644
--- a/test/components/views/settings/tabs/user/AppearanceUserSettingsTab-test.tsx
+++ b/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;
 
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index c36dc0d675..bb34acb9d5 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/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";
diff --git a/test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx
index fc0c2a1264..6db70fa8a6 100644
--- a/test/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx
+++ b/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();
diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index ea9883a6a5..a069de69a5 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index c0b9173969..ae427da9ec 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/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
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 328327afb3..ff18d3d9cb 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/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"
diff --git a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
index ef08e9ca48..7ce4e90208 100644
--- a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
+++ b/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 />", () => {
diff --git a/test/globalSetup.js b/test/globalSetup.ts
similarity index 100%
rename from test/globalSetup.js
rename to test/globalSetup.ts
diff --git a/test/setupTests.js b/test/setupTests.ts
similarity index 53%
rename from test/setupTests.js
rename to test/setupTests.ts
index 4e69673548..a7044c0474 100644
--- a/test/setupTests.js
+++ b/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
diff --git a/test/utils/oidc/authorize-test.ts b/test/utils/oidc/authorize-test.ts
index a531945a26..54506376b2 100644
--- a/test/utils/oidc/authorize-test.ts
+++ b/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(),