diff --git a/ui/src/Components/Labels/FilterInputLabel/index.test.tsx b/ui/src/Components/Labels/FilterInputLabel/index.test.tsx
index 0e3001ea5..7641c6a80 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.test.tsx
+++ b/ui/src/Components/Labels/FilterInputLabel/index.test.tsx
@@ -13,12 +13,15 @@ beforeEach(() => {
 const NonEqualMatchers = ["!=", "=~", "!~", ">", "<"];
 
 const MockColors = () => {
-  alertStore.data.colors["foo"] = {
-    bar: {
-      brightness: 200,
-      background: "rgba(4,5,6,200)",
+  alertStore.data.setColors({
+    foo: {
+      bar: {
+        brightness: 200,
+        background: "rgba(4,5,6,200)",
+      },
     },
-  };
+    ...alertStore.data.colors,
+  });
 };
 
 const ShallowLabel = (
diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.tsx b/ui/src/Components/Labels/FilteringLabel/index.test.tsx
index fb6fdee57..95634b061 100644
--- a/ui/src/Components/Labels/FilteringLabel/index.test.tsx
+++ b/ui/src/Components/Labels/FilteringLabel/index.test.tsx
@@ -67,23 +67,29 @@ describe("<FilteringLabel />", () => {
   });
 
   it("label with dark background color should have 'components-label-dark' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 125,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 125,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = MountedFilteringLabel("foo", "bar");
     expect(tree.hasClass("components-label-dark")).toBe(true);
   });
 
   it("label with bright background color should have 'components-label-bright' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 200,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 200,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = MountedFilteringLabel("foo", "bar");
     expect(tree.hasClass("components-label-bright")).toBe(true);
   });
diff --git a/ui/src/Components/Labels/HistoryLabel/index.test.tsx b/ui/src/Components/Labels/HistoryLabel/index.test.tsx
index fc3fbfec1..8ba99f152 100644
--- a/ui/src/Components/Labels/HistoryLabel/index.test.tsx
+++ b/ui/src/Components/Labels/HistoryLabel/index.test.tsx
@@ -35,12 +35,15 @@ describe("<HistoryLabel />", () => {
   });
 
   it("label with dark background color should have 'components-label-dark' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 125,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 125,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = ShallowHistoryLabel("foo", "=", "bar").find(
       ".components-label",
     );
@@ -48,12 +51,15 @@ describe("<HistoryLabel />", () => {
   });
 
   it("label with bright background color should have 'components-label-bright' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 200,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 200,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = ShallowHistoryLabel("foo", "=", "bar").find(
       ".components-label",
     );
diff --git a/ui/src/Components/Labels/StaticLabel/index.test.tsx b/ui/src/Components/Labels/StaticLabel/index.test.tsx
index dc1b5c570..7770997ee 100644
--- a/ui/src/Components/Labels/StaticLabel/index.test.tsx
+++ b/ui/src/Components/Labels/StaticLabel/index.test.tsx
@@ -23,12 +23,15 @@ describe("<StaticLabel />", () => {
   });
 
   it("label with dark background color should have 'components-label-dark' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 125,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 125,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = MountedStaticLabel();
     expect(
       tree.find(".components-label").hasClass("components-label-dark"),
@@ -36,12 +39,15 @@ describe("<StaticLabel />", () => {
   });
 
   it("label with bright background color should have 'components-label-bright' class", () => {
-    alertStore.data.colors["foo"] = {
-      bar: {
-        brightness: 200,
-        background: "rgba(4,5,6,200)",
+    alertStore.data.setColors({
+      foo: {
+        bar: {
+          brightness: 200,
+          background: "rgba(4,5,6,200)",
+        },
       },
-    };
+      ...alertStore.data.colors,
+    });
     const tree = MountedStaticLabel();
     expect(
       tree.find(".components-label").hasClass("components-label-bright"),