From 8e2f658845d572ca92a92d8ab1ee1e08efe45e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 29 Dec 2021 18:27:25 +0000
Subject: [PATCH] fix(tests): update tests

---
 .../AlertGrid/AlertGroup/Alert/index.test.tsx |  6 +-
 .../AlertGroup/GroupFooter/index.test.tsx     | 10 +-
 .../Grid/AlertGrid/AlertGroup/index.test.tsx  | 28 +++---
 .../Components/Grid/AlertGrid/index.test.tsx  | 98 +++++++++++--------
 ui/src/Components/Grid/index.test.tsx         |  6 +-
 .../NavBar/FilterInput/History.test.tsx       | 12 +--
 .../PaginatedAlertList/index.test.tsx         |  6 +-
 .../SilenceModal/SilenceForm.test.tsx         | 26 ++---
 .../SilenceModal/SilenceModalContent.test.tsx |  8 +-
 .../SilencePreview/index.test.tsx             |  2 +-
 .../SilenceSubmitController.test.tsx          |  8 +-
 11 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
index 5c18ce90f..5f8861dd6 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx
@@ -138,7 +138,7 @@ describe("<Alert />", () => {
     const group = MockAlertGroup([], [alert], [], [], {});
     const tree = MountedAlert(alert, group, false, false);
     const label = tree
-      .find("FilteringLabel")
+      .find("Memo(FilteringLabel)")
       .filterWhere((elem) => elem.props().name === "@cluster");
     expect(label.text()).toBe("@cluster: default");
   });
@@ -168,7 +168,7 @@ describe("<Alert />", () => {
     const group = MockAlertGroup([], [alert], [], [], {});
     const tree = MountedAlert(alert, group, false, false);
     const labels = tree
-      .find("FilteringLabel")
+      .find("Memo(FilteringLabel)")
       .filterWhere((elem) => elem.props().name === "@cluster");
     expect(labels).toHaveLength(2);
     expect(labels.at(0).text()).toBe("@cluster: default");
@@ -180,7 +180,7 @@ describe("<Alert />", () => {
     const group = MockAlertGroup([], [alert], [], [], {});
     const tree = MountedAlert(alert, group, true, false);
     const label = tree
-      .find("FilteringLabel")
+      .find("Memo(FilteringLabel)")
       .filterWhere((elem) => elem.props().name === "@receiver");
     expect(label.text()).toBe("@receiver: by-name");
   });
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
index 82a8b34b9..054ff3e41 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx
@@ -83,7 +83,7 @@ const MountedGroupFooter = () => {
 describe("<GroupFooter />", () => {
   it("matches snapshot", () => {
     group.shared.clusters = ["default"];
-    const tree = MountedGroupFooter().find("GroupFooter");
+    const tree = MountedGroupFooter().find("Memo(GroupFooter)");
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
@@ -98,7 +98,7 @@ describe("<GroupFooter />", () => {
       },
     });
 
-    const tree = MountedGroupFooter().find("GroupFooter");
+    const tree = MountedGroupFooter().find("Memo(GroupFooter)");
     expect(tree.find("ManagedSilence")).toHaveLength(1);
   });
 
@@ -111,7 +111,7 @@ describe("<GroupFooter />", () => {
       default: {},
     });
 
-    const tree = MountedGroupFooter().find("GroupFooter");
+    const tree = MountedGroupFooter().find("Memo(GroupFooter)");
     expect(tree.find("FallbackSilenceDesciption")).toHaveLength(1);
   });
 
@@ -124,7 +124,7 @@ describe("<GroupFooter />", () => {
       foo: {},
     });
 
-    const tree = MountedGroupFooter().find("GroupFooter");
+    const tree = MountedGroupFooter().find("Memo(GroupFooter)");
     expect(tree.find("FallbackSilenceDesciption")).toHaveLength(1);
   });
 
@@ -143,7 +143,7 @@ describe("<GroupFooter />", () => {
       },
     });
 
-    const tree = MountedGroupFooter().find("GroupFooter");
+    const tree = MountedGroupFooter().find("Memo(GroupFooter)");
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
index d7f365119..cb59d9dd1 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx
@@ -117,7 +117,7 @@ const ValidateCollapse = (
 
   MockAlerts(3, 3);
   const tree = MountedAlertGroup(jest.fn());
-  expect(tree.find("Alert")).toHaveLength(shouldBeCollapsed ? 0 : 3);
+  expect(tree.find("Memo(Alert)")).toHaveLength(shouldBeCollapsed ? 0 : 3);
 };
 
 describe("<AlertGroup />", () => {
@@ -149,8 +149,8 @@ describe("<AlertGroup />", () => {
   it("renders Alertmanager cluster labels in footer if shared", () => {
     MockAlerts(2, 2);
     group.shared.clusters = ["default"];
-    const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
-    expect(tree.find("GroupFooter").html()).toMatch(/@cluster/);
+    const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+    expect(tree.find("Memo(GroupFooter)").html()).toMatch(/@cluster/);
   });
 
   it("only renders one @cluster label per cluster in the footer", () => {
@@ -178,8 +178,8 @@ describe("<AlertGroup />", () => {
       });
     }
     group.shared.clusters = ["default", "HA"];
-    const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
-    const labels = tree.find("GroupFooter").find("FilteringLabel");
+    const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+    const labels = tree.find("Memo(GroupFooter)").find("Memo(FilteringLabel)");
     expect(labels).toHaveLength(3);
     expect(labels.at(0).text()).toBe("@cluster: default");
     expect(labels.at(1).text()).toBe("@cluster: HA");
@@ -191,8 +191,8 @@ describe("<AlertGroup />", () => {
     for (let i = 0; i < group.alerts.length; i++) {
       group.alerts[i].alertmanager = [];
     }
-    const tree = MountedAlertGroup(jest.fn()).find("AlertGroup");
-    const labels = tree.find("GroupFooter").find("FilteringLabel");
+    const tree = MountedAlertGroup(jest.fn()).find("Memo(AlertGroup)");
+    const labels = tree.find("Memo(GroupFooter)").find("Memo(FilteringLabel)");
     expect(labels).toHaveLength(1);
     expect(labels.at(0).text()).toBe("@receiver: by-name");
   });
@@ -214,7 +214,7 @@ describe("<AlertGroup />", () => {
     const alerts = tree.find("ul.list-group");
     expect(alerts.html()).toMatch(/@cluster/);
 
-    const footer = tree.find("GroupFooter");
+    const footer = tree.find("Memo(GroupFooter)");
     expect(footer.html()).not.toMatch(/@cluster/);
   });
 
@@ -222,7 +222,7 @@ describe("<AlertGroup />", () => {
     MockAlerts(5, 10);
     const tree = MountedAlertGroup(jest.fn());
     tree.find("span.badge.cursor-pointer").at(1).simulate("click");
-    expect(tree.find("Alert")).toHaveLength(0);
+    expect(tree.find("Memo(Alert)")).toHaveLength(0);
     expect(tree.find("ul.list-group")).toHaveLength(0);
   });
 
@@ -230,7 +230,7 @@ describe("<AlertGroup />", () => {
     MockAlerts(5, 10);
     alertStore.ui.setIsIdle(true);
     const tree = MountedAlertGroup(jest.fn(), MockThemeContext);
-    expect(tree.find("Alert")).toHaveLength(1);
+    expect(tree.find("Memo(Alert)")).toHaveLength(1);
   });
 
   it("is collapsed by default on desktop when defaultCollapseState=collapsed", () => {
@@ -366,7 +366,7 @@ describe("<AlertGroup /> renderConfig", () => {
     const tree = MountedAlertGroup(jest.fn());
 
     tree
-      .find("Alert")
+      .find("Memo(Alert)")
       .at(0)
       .find("span.bg-secondary.cursor-pointer")
       .at(0)
@@ -407,7 +407,7 @@ describe("<AlertGroup /> card theme", () => {
     settingsStore.alertGroupConfig.setColorTitleBar(false);
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn());
-    expect(tree.find("GroupHeader").prop("themedCounters")).toBe(true);
+    expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(true);
   });
 
   it("renders bg-light border when colorTitleBar=true and there are multiple alert states", () => {
@@ -424,7 +424,7 @@ describe("<AlertGroup /> card theme", () => {
     settingsStore.alertGroupConfig.setColorTitleBar(true);
     group.stateCount = { active: 5, suppressed: 6, unprocessed: 7 };
     const tree = MountedAlertGroup(jest.fn());
-    expect(tree.find("GroupHeader").prop("themedCounters")).toBe(true);
+    expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(true);
   });
 
   it("renders state based background when colorTitleBar=true and there's only one alert state", () => {
@@ -441,7 +441,7 @@ describe("<AlertGroup /> card theme", () => {
     settingsStore.alertGroupConfig.setColorTitleBar(true);
     group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 };
     const tree = MountedAlertGroup(jest.fn());
-    expect(tree.find("GroupHeader").prop("themedCounters")).toBe(false);
+    expect(tree.find("Memo(GroupHeader)").prop("themedCounters")).toBe(false);
   });
 
   it("renders AlertHistory when enabled", async () => {
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.tsx b/ui/src/Components/Grid/AlertGrid/index.test.tsx
index e84fd49cb..e100bdc55 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.test.tsx
@@ -226,7 +226,7 @@ describe("<Grid />", () => {
   it("renders all alert groups", () => {
     MockGroupList(55, 5);
     const tree = MountedGrid();
-    const alertGroups = tree.find("AlertGroup");
+    const alertGroups = tree.find("Memo(AlertGroup)");
     expect(alertGroups).toHaveLength(55);
   });
 
@@ -297,7 +297,7 @@ describe("<Grid />", () => {
     settingsStore.gridConfig.setSortReverse(false);
     MockGroupList(3, 1);
     const tree = ShallowGrid();
-    const alertGroups = tree.find("AlertGroup");
+    const alertGroups = tree.find("Memo(AlertGroup)");
     expect(alertGroups.map((g) => (g.props() as any).group.id)).toEqual([
       "id1",
       "id2",
@@ -320,7 +320,7 @@ describe("<Grid />", () => {
     };
     alertStore.data.setGrids([grid]);
     tree.setProps({ grid: grid });
-    expect(tree.find("AlertGroup")).toHaveLength(10);
+    expect(tree.find("Memo(AlertGroup)")).toHaveLength(10);
 
     tree.find("span.cursor-pointer").at(1).simulate("click");
     act(() => {
@@ -354,8 +354,8 @@ describe("<Grid />", () => {
     };
     alertStore.data.setGrids([MockGrid(), MockGrid()]);
     tree.setProps({ grid: grid });
-    expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(1);
-    expect(tree.find("h5").at(0).find("FilteringLabel").text()).toBe(
+    expect(tree.find("h5").at(0).find("Memo(FilteringLabel)")).toHaveLength(1);
+    expect(tree.find("h5").at(0).find("Memo(FilteringLabel)").text()).toBe(
       "foo: bar"
     );
   });
@@ -373,7 +373,7 @@ describe("<Grid />", () => {
     };
     alertStore.data.setGrids([MockGrid(), MockGrid()]);
     tree.setProps({ grid: grid });
-    expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(0);
+    expect(tree.find("h5").at(0).find("Memo(FilteringLabel)")).toHaveLength(0);
   });
 
   it("left click on a group collapse toggle only toggles clicked group", () => {
@@ -381,21 +381,23 @@ describe("<Grid />", () => {
     const tree = MountedGrid();
 
     for (let i = 0; i <= 9; i++) {
-      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+      expect(
+        tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+      ).toHaveLength(3);
     }
 
     tree
-      .find("AlertGroup")
+      .find("Memo(AlertGroup)")
       .at(2)
-      .find("GroupHeader")
+      .find("Memo(GroupHeader)")
       .find("span.cursor-pointer")
       .at(1)
       .simulate("click");
 
     for (let i = 0; i <= 9; i++) {
-      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(
-        i === 2 ? 0 : 3
-      );
+      expect(
+        tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+      ).toHaveLength(i === 2 ? 0 : 3);
     }
   });
 
@@ -429,22 +431,28 @@ describe("<Grid />", () => {
     const tree = MountedAlertGrid();
 
     for (let i = 0; i <= 19; i++) {
-      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+      expect(
+        tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+      ).toHaveLength(3);
     }
 
     tree
-      .find("AlertGroup")
+      .find("Memo(AlertGroup)")
       .at(2)
-      .find("GroupHeader")
+      .find("Memo(GroupHeader)")
       .find("span.cursor-pointer")
       .at(1)
       .simulate("click", { altKey: true });
 
     for (let i = 0; i <= 9; i++) {
-      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(0);
+      expect(
+        tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+      ).toHaveLength(0);
     }
     for (let i = 10; i <= 19; i++) {
-      expect(tree.find("AlertGroup").at(i).find("Alert")).toHaveLength(3);
+      expect(
+        tree.find("Memo(AlertGroup)").at(i).find("Memo(Alert)")
+      ).toHaveLength(3);
     }
   });
 
@@ -483,15 +491,15 @@ describe("<AlertGrid />", () => {
 
     const tree = ShallowGrid();
     tree.setProps({
-      gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-      groupWidth: wrapper.find("Grid").prop("groupWidth"),
+      gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+      groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
     });
 
     tree.update();
-    expect(wrapper.find("Grid").prop("groupWidth")).toBe(
+    expect(wrapper.find("Memo(Grid)").prop("groupWidth")).toBe(
       Math.floor(innerWidth / columns)
     );
-    expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(
+    expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
       Math.floor(innerWidth / columns)
     );
   };
@@ -572,10 +580,12 @@ describe("<AlertGrid />", () => {
     const tree = ShallowGrid();
 
     tree.setProps({
-      gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-      groupWidth: wrapper.find("Grid").prop("groupWidth"),
+      gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+      groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
     });
-    expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(1980 / 4);
+    expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
+      1980 / 4
+    );
 
     // then resize and verify if column count was changed
     document.body.clientWidth = 1000;
@@ -585,13 +595,15 @@ describe("<AlertGrid />", () => {
       resizeCallback([{ contentRect: { width: 1000, height: 1000 } }]);
     });
     wrapper.update();
-    expect(wrapper.find("Grid").prop("groupWidth")).toBe(1000 / 2);
+    expect(wrapper.find("Memo(Grid)").prop("groupWidth")).toBe(1000 / 2);
 
     tree.setProps({
-      gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-      groupWidth: wrapper.find("Grid").prop("groupWidth"),
+      gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+      groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
     });
-    expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(1000 / 2);
+    expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(
+      1000 / 2
+    );
   });
 
   it("scrollbar render doesn't resize alert groups", () => {
@@ -606,10 +618,10 @@ describe("<AlertGrid />", () => {
     const tree = ShallowGrid();
 
     tree.setProps({
-      gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-      groupWidth: wrapper.find("Grid").prop("groupWidth"),
+      gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+      groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
     });
-    expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(400);
+    expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(400);
 
     // then resize and verify if column count was changed
     act(() => {
@@ -617,10 +629,10 @@ describe("<AlertGrid />", () => {
     });
     wrapper.update();
     tree.setProps({
-      gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-      groupWidth: wrapper.find("Grid").prop("groupWidth"),
+      gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+      groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
     });
-    expect(tree.find("AlertGroup").at(0).prop("groupWidth")).toBe(396);
+    expect(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth")).toBe(396);
   });
 
   it("viewport resize doesn't allow loops", () => {
@@ -645,10 +657,10 @@ describe("<AlertGrid />", () => {
       });
       wrapper.update();
       tree.setProps({
-        gridSizesConfig: wrapper.find("Grid").prop("gridSizesConfig"),
-        groupWidth: wrapper.find("Grid").prop("groupWidth"),
+        gridSizesConfig: wrapper.find("Memo(Grid)").prop("gridSizesConfig"),
+        groupWidth: wrapper.find("Memo(Grid)").prop("groupWidth"),
       });
-      results.push(tree.find("AlertGroup").at(0).prop("groupWidth"));
+      results.push(tree.find("Memo(AlertGroup)").at(0).prop("groupWidth"));
     }
 
     expect(results).toStrictEqual([
@@ -684,12 +696,12 @@ describe("<AlertGrid />", () => {
       },
     ]);
     const tree = MountedAlertGrid();
-    expect(tree.find("Grid")).toHaveLength(2);
-    expect(tree.find("AlertGroup")).toHaveLength(6);
+    expect(tree.find("Memo(Grid)")).toHaveLength(2);
+    expect(tree.find("Memo(AlertGroup)")).toHaveLength(6);
 
     // toggle all grids to hide all groups
     tree
-      .find("Grid")
+      .find("Memo(Grid)")
       .at(0)
       .find("span.cursor-pointer")
       .at(1)
@@ -727,7 +739,7 @@ describe("<AlertGrid />", () => {
     window.innerWidth = 1000;
     const tree = MountedAlertGrid();
     expect(tree.find("div.components-grid")).toHaveLength(2);
-    expect(tree.find("AlertGroup")).toHaveLength(20);
+    expect(tree.find("Memo(AlertGroup)")).toHaveLength(20);
 
     expect(tree.find("div.components-grid").at(0).prop("style")).toMatchObject({
       paddingLeft: "5px",
@@ -761,8 +773,8 @@ describe("<AlertGrid />", () => {
     window.innerWidth = 1000;
     const tree = MountedAlertGrid();
     tree.update();
-    expect(tree.find("Grid")).toHaveLength(1);
-    expect(tree.find("AlertGroup")).toHaveLength(10);
+    expect(tree.find("Memo(Grid)")).toHaveLength(1);
+    expect(tree.find("Memo(AlertGroup)")).toHaveLength(10);
 
     expect(tree.find("div.components-grid").at(0).prop("style")).toMatchObject({
       paddingLeft: "0px",
diff --git a/ui/src/Components/Grid/index.test.tsx b/ui/src/Components/Grid/index.test.tsx
index 3947c6dff..f43b33734 100644
--- a/ui/src/Components/Grid/index.test.tsx
+++ b/ui/src/Components/Grid/index.test.tsx
@@ -36,7 +36,7 @@ const ShallowGrid = () => {
 describe("<Grid />", () => {
   it("renders only AlertGrid when all upstreams are healthy", () => {
     const tree = ShallowGrid();
-    expect(tree.find("AlertGrid")).toHaveLength(1);
+    expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
   });
 
   it("renders FatalError if there's only one upstream and it's unhealthy", () => {
@@ -125,7 +125,7 @@ describe("<Grid />", () => {
     alertStore.info.setVersion("unknown");
     alertStore.info.setTotalAlerts(0);
     const tree = ShallowGrid();
-    expect(tree.find("AlertGrid")).toHaveLength(1);
+    expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
   });
 
   it("renders EmptyGrid after first fetch when totalAlerts is 0", () => {
@@ -169,7 +169,7 @@ describe("<Grid />", () => {
     alertStore.info.setVersion("unknown");
     alertStore.info.setTotalAlerts(1);
     const tree = ShallowGrid();
-    expect(tree.find("AlertGrid")).toHaveLength(1);
+    expect(tree.find("Memo(AlertGrid)")).toHaveLength(1);
   });
 
   it("unmounts without crashes", () => {
diff --git a/ui/src/Components/NavBar/FilterInput/History.test.tsx b/ui/src/Components/NavBar/FilterInput/History.test.tsx
index e6c3ed516..761c78b6f 100644
--- a/ui/src/Components/NavBar/FilterInput/History.test.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.test.tsx
@@ -116,7 +116,7 @@ describe("<History />", () => {
     const tree = MountedHistory();
     tree.find("button.cursor-pointer").simulate("click");
     expect(tree.find("button.dropdown-item")).toHaveLength(1);
-    const labels = tree.find("HistoryLabel");
+    const labels = tree.find("Memo(HistoryLabel)");
     expect(labels).toHaveLength(2);
     expect(labels.at(0).html()).toMatch(/>foo=bar</);
     expect(labels.at(1).html()).toMatch(/>baz!=bar</);
@@ -147,7 +147,7 @@ describe("<HistoryMenu />", () => {
       "Last used filtersfoo=bar1baz=~bar1Save filtersReset filtersClear history"
     );
 
-    const labels = tree.find("HistoryLabel");
+    const labels = tree.find("Memo(HistoryLabel)");
     expect(labels).toHaveLength(2);
     expect(labels.at(0).html()).toMatch(/>foo=bar1</);
     expect(labels.at(1).html()).toMatch(/>baz=~bar1</);
@@ -193,13 +193,13 @@ describe("<HistoryMenu />", () => {
     expect(labelSets).toHaveLength(8);
 
     // oldest pushed label should be rendered last
-    const labelsLast = labelSets.last().find("HistoryLabel");
+    const labelsLast = labelSets.last().find("Memo(HistoryLabel)");
     expect(labelsLast).toHaveLength(2);
     expect(labelsLast.at(0).html()).toMatch(/>foo=bar9</);
     expect(labelsLast.at(1).html()).toMatch(/>baz=~bar9</);
 
     // most recently pushed label should be rendered fist
-    const labelsFist = labelSets.first().find("HistoryLabel");
+    const labelsFist = labelSets.first().find("Memo(HistoryLabel)");
     expect(labelsFist).toHaveLength(2);
     expect(labelsFist.at(0).html()).toMatch(/>foo=bar16</);
     expect(labelsFist.at(1).html()).toMatch(/>baz=~bar16</);
@@ -221,13 +221,13 @@ describe("<HistoryMenu />", () => {
     expect(labelSets).toHaveLength(4);
 
     // oldest pushed label should be rendered last
-    const labelsLast = labelSets.last().find("HistoryLabel");
+    const labelsLast = labelSets.last().find("Memo(HistoryLabel)");
     expect(labelsLast).toHaveLength(2);
     expect(labelsLast.at(0).html()).toMatch(/>foo=bar13</);
     expect(labelsLast.at(1).html()).toMatch(/>baz=~bar13</);
 
     // most recently pushed label should be rendered fist
-    const labelsFist = labelSets.first().find("HistoryLabel");
+    const labelsFist = labelSets.first().find("Memo(HistoryLabel)");
     expect(labelsFist).toHaveLength(2);
     expect(labelsFist.at(0).html()).toMatch(/>foo=bar16</);
     expect(labelsFist.at(1).html()).toMatch(/>baz=~bar16</);
diff --git a/ui/src/Components/PaginatedAlertList/index.test.tsx b/ui/src/Components/PaginatedAlertList/index.test.tsx
index cdd01baf5..158aee26b 100644
--- a/ui/src/Components/PaginatedAlertList/index.test.tsx
+++ b/ui/src/Components/PaginatedAlertList/index.test.tsx
@@ -94,7 +94,7 @@ describe("<PaginatedAlertList />", () => {
       <PaginatedAlertList alertStore={alertStore} filters={["foo=bar"]} />
     );
     expect(tree.find("LabelSetList")).toHaveLength(1);
-    expect(tree.find("StaticLabel")).toHaveLength(3);
+    expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
   });
 
   it("renders empty LabelSetList with empty response", () => {
@@ -111,7 +111,7 @@ describe("<PaginatedAlertList />", () => {
       <PaginatedAlertList alertStore={alertStore} filters={["foo=bar"]} />
     );
     expect(tree.find("LabelSetList")).toHaveLength(1);
-    expect(tree.find("StaticLabel")).toHaveLength(0);
+    expect(tree.find("Memo(StaticLabel)")).toHaveLength(0);
   });
 
   it("fetches affected alerts on mount", () => {
@@ -145,7 +145,7 @@ describe("<PaginatedAlertList />", () => {
       />
     );
     expect(tree.text()).toMatch(/Affected alerts/);
-    expect(tree.find("StaticLabel")).toHaveLength(3);
+    expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
   });
 
   it("handles empty grid response correctly", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceForm.test.tsx b/ui/src/Components/SilenceModal/SilenceForm.test.tsx
index 5deb37f57..ae1ee71c4 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceForm.test.tsx
@@ -67,7 +67,7 @@ const MountedSilenceForm = () => {
 describe("<SilenceForm /> matchers", () => {
   it("has an empty matcher selects on default render", () => {
     const tree = MountedSilenceForm();
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     expect(matchers).toHaveLength(1);
     expect(silenceFormStore.data.matchers).toHaveLength(1);
   });
@@ -97,7 +97,7 @@ describe("<SilenceForm /> matchers", () => {
     ]);
     silenceFormStore.data.setAutofillMatchers(true);
     const tree = MountedSilenceForm();
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     expect(matchers).toHaveLength(12);
     expect(silenceFormStore.data.matchers).toHaveLength(12);
     expect(silenceFormStore.data.matchers).toEqual([
@@ -275,7 +275,7 @@ describe("<SilenceForm /> matchers", () => {
     ]);
     silenceFormStore.data.setAutofillMatchers(true);
     const tree = MountedSilenceForm();
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     expect(matchers).toHaveLength(12);
     expect(silenceFormStore.data.matchers).toHaveLength(12);
     expect(silenceFormStore.data.matchers).toEqual([
@@ -451,7 +451,7 @@ describe("<SilenceForm /> matchers", () => {
     ]);
     silenceFormStore.data.setAutofillMatchers(false);
     const tree = MountedSilenceForm();
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     expect(matchers).toHaveLength(1);
     expect(silenceFormStore.data.matchers[0]).toMatchObject({
       isRegex: false,
@@ -464,7 +464,7 @@ describe("<SilenceForm /> matchers", () => {
     const tree = MountedSilenceForm();
     const button = tree.find("button[type='button']");
     button.simulate("click", { preventDefault: jest.fn() });
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     expect(matchers).toHaveLength(2);
     expect(silenceFormStore.data.matchers).toHaveLength(2);
   });
@@ -473,7 +473,7 @@ describe("<SilenceForm /> matchers", () => {
     const tree = MountedSilenceForm();
     expect(silenceFormStore.data.matchers).toHaveLength(1);
 
-    const matcher = tree.find("SilenceMatch");
+    const matcher = tree.find("Memo(SilenceMatch)");
     const button = matcher.find("button");
     expect(button).toHaveLength(0);
   });
@@ -485,7 +485,7 @@ describe("<SilenceForm /> matchers", () => {
     const tree = MountedSilenceForm();
     expect(silenceFormStore.data.matchers).toHaveLength(2);
 
-    const matcher = tree.find("SilenceMatch");
+    const matcher = tree.find("Memo(SilenceMatch)");
     const button = matcher.find("button");
     expect(button).toHaveLength(2);
   });
@@ -498,7 +498,7 @@ describe("<SilenceForm /> matchers", () => {
     const tree = MountedSilenceForm();
     expect(silenceFormStore.data.matchers).toHaveLength(3);
 
-    const matchers = tree.find("SilenceMatch");
+    const matchers = tree.find("Memo(SilenceMatch)");
     const toDelete = matchers.at(1);
     const button = toDelete.find("button");
     button.simulate("click");
@@ -509,23 +509,23 @@ describe("<SilenceForm /> matchers", () => {
 describe("<SilenceForm /> preview", () => {
   it("doesn't render PayloadPreview by default", () => {
     const tree = MountedSilenceForm();
-    expect(tree.find("PayloadPreview")).toHaveLength(0);
+    expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
   });
 
   it("renders PayloadPreview after clicking the toggle", () => {
     const tree = MountedSilenceForm();
     tree.find("span.badge.cursor-pointer.text-muted").simulate("click");
-    expect(tree.find("PayloadPreview")).toHaveLength(1);
+    expect(tree.find("Memo(PayloadPreview)")).toHaveLength(1);
   });
 
   it("clicking on the toggle icon toggles PayloadPreview", () => {
     const tree = MountedSilenceForm();
     const button = tree.find(".badge.cursor-pointer.text-muted");
-    expect(tree.find("PayloadPreview")).toHaveLength(0);
+    expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
     button.simulate("click");
-    expect(tree.find("PayloadPreview")).toHaveLength(1);
+    expect(tree.find("Memo(PayloadPreview)")).toHaveLength(1);
     button.simulate("click");
-    expect(tree.find("PayloadPreview")).toHaveLength(0);
+    expect(tree.find("Memo(PayloadPreview)")).toHaveLength(0);
   });
 
   it("clicking on the copy button copies form link to the clipboard", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx b/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
index 9a3f4deb6..aff89558c 100644
--- a/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceModalContent.test.tsx
@@ -79,7 +79,7 @@ describe("<SilenceModalContent />", () => {
     const tabs = tree.find("Tab");
     tabs.at(1).simulate("click");
     tree.update();
-    const form = tree.find("Browser");
+    const form = tree.find("Memo(Browser)");
     expect(form).toHaveLength(1);
   });
 
@@ -88,7 +88,7 @@ describe("<SilenceModalContent />", () => {
     const tree = MountedSilenceModalContent();
     const tabs = tree.find("Tab");
     tabs.at(0).simulate("click");
-    const form = tree.find("SilenceForm");
+    const form = tree.find("Memo(SilenceForm)");
     expect(form).toHaveLength(1);
   });
 
@@ -138,7 +138,7 @@ describe("<SilenceModalContent /> Editor", () => {
   it("renders SilenceForm when silenceFormStore.data.currentStage is 'UserInput'", () => {
     silenceFormStore.data.setStage("form");
     const tree = MountedSilenceModalContent();
-    const form = tree.find("SilenceForm");
+    const form = tree.find("Memo(SilenceForm)");
     expect(form).toHaveLength(1);
   });
 
@@ -160,7 +160,7 @@ describe("<SilenceModalContent /> Browser", () => {
   it("renders silence browser when tab is set to Browser", () => {
     silenceFormStore.tab.setTab("browser");
     const tree = MountedSilenceModalContent();
-    const form = tree.find("Browser");
+    const form = tree.find("Memo(Browser)");
     expect(form).toHaveLength(1);
   });
 });
diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx b/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
index 74814d7d6..2996f4a76 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
+++ b/ui/src/Components/SilenceModal/SilencePreview/index.test.tsx
@@ -116,7 +116,7 @@ describe("<SilencePreview />", () => {
     });
     const tree = MountedSilencePreview();
     expect(tree.text()).toMatch(/Affected alerts/);
-    expect(tree.find("StaticLabel")).toHaveLength(3);
+    expect(tree.find("Memo(StaticLabel)")).toHaveLength(3);
   });
 
   it("handles empty grid response correctly", () => {
diff --git a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
index bf7e2d38a..ed9310514 100644
--- a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
+++ b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx
@@ -70,8 +70,8 @@ describe("<SilenceSubmitController />", () => {
         silenceFormStore={silenceFormStore}
       />
     );
-    expect(tree.find("MultiClusterStatus")).toHaveLength(1);
-    expect(tree.find("SingleClusterStatus")).toHaveLength(0);
+    expect(tree.find("Memo(MultiClusterStatus)")).toHaveLength(1);
+    expect(tree.find("Memo(SingleClusterStatus)")).toHaveLength(0);
   });
 
   it("renders SingleClusterStatus when multiple clusters are used", () => {
@@ -85,8 +85,8 @@ describe("<SilenceSubmitController />", () => {
         silenceFormStore={silenceFormStore}
       />
     );
-    expect(tree.find("MultiClusterStatus")).toHaveLength(0);
-    expect(tree.find("SingleClusterStatus")).toHaveLength(1);
+    expect(tree.find("Memo(MultiClusterStatus)")).toHaveLength(0);
+    expect(tree.find("Memo(SingleClusterStatus)")).toHaveLength(1);
   });
 
   it("resets the form on 'Back' button click", () => {