diff --git a/ui/src/Components/MainModal/index.test.js b/ui/src/Components/MainModal/index.test.js
index 79b6e5ee6..fc0a699d6 100644
--- a/ui/src/Components/MainModal/index.test.js
+++ b/ui/src/Components/MainModal/index.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -14,27 +14,33 @@ beforeEach(() => {
   settingsStore = new Settings();
 });
 
-const RenderMainModal = () => {
+const ShallowMainModal = () => {
   return shallow(
     <MainModal alertStore={alertStore} settingsStore={settingsStore} />
   );
 };
 
+const MountedMainModal = () => {
+  return mount(
+    <MainModal alertStore={alertStore} settingsStore={settingsStore} />
+  );
+};
+
 describe("<MainModal />", () => {
   it("only renders FontAwesomeIcon when modal is not shown", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     expect(tree.text()).toBe("<FontAwesomeIcon />");
   });
 
   it("renders the modal when it is shown", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
   });
 
   it("hides the modal when toggle() is called twice", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     toggle.simulate("click");
@@ -42,7 +48,7 @@ describe("<MainModal />", () => {
   });
 
   it("hides the modal when hide() is called", () => {
-    const tree = RenderMainModal();
+    const tree = ShallowMainModal();
     const toggle = tree.find(".nav-link");
     toggle.simulate("click");
     expect(tree.text()).toBe("<FontAwesomeIcon /><MainModalContent />");
@@ -50,4 +56,27 @@ describe("<MainModal />", () => {
     instance.toggle.hide();
     expect(tree.text()).toBe("<FontAwesomeIcon />");
   });
+
+  it("'modal-open' class is appended to body node when modal is visible", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is hidden", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    toggle.simulate("click");
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
+
+  it("'modal-open' class is removed from body node after modal is unmounted", () => {
+    const tree = MountedMainModal();
+    const toggle = tree.find(".nav-link");
+    toggle.simulate("click");
+    tree.unmount();
+    expect(document.body.className.split(" ")).not.toContain("modal-open");
+  });
 });