diff --git a/ui/src/Components/Grid/index.test.js b/ui/src/Components/Grid/index.test.js
new file mode 100644
index 000000000..d2a23fdcb
--- /dev/null
+++ b/ui/src/Components/Grid/index.test.js
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import { AlertStore } from "Stores/AlertStore";
+import { Settings } from "Stores/Settings";
+import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { Grid } from ".";
+
+let alertStore;
+let settingsStore;
+let silenceFormStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+  settingsStore = new Settings();
+  silenceFormStore = new SilenceFormStore();
+});
+
+const ShallowGrid = () => {
+  return shallow(
+    <Grid
+      alertStore={alertStore}
+      settingsStore={settingsStore}
+      silenceFormStore={silenceFormStore}
+    />
+  );
+};
+
+describe("<Grid />", () => {
+  it("renders only AlertGrid when all upstreams are healthy", () => {
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<AlertGrid />");
+  });
+
+  it("renders UpstreamError for each unhealthy upstream", () => {
+    alertStore.data.upstreams = {
+      counters: { total: 3, healthy: 1, failed: 2 },
+      instances: [
+        { name: "am1", uri: "http://am1", error: "error 1" },
+        { name: "am2", uri: "file:///mock", error: "" },
+        { name: "am3", uri: "http://am1", error: "error 2" }
+      ]
+    };
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<UpstreamError /><UpstreamError /><AlertGrid />");
+  });
+
+  it("renders only FatalError on failed fetch", () => {
+    alertStore.status.error = "error";
+    alertStore.data.upstreams = {
+      counters: { total: 0, healthy: 0, failed: 1 },
+      instances: [{ name: "am", uri: "http://am1", error: "error" }]
+    };
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<FatalError />");
+  });
+});