Merge pull request #101 from prymitive/migrate-to-enzyme

chore(tests): migrate tests to enzyme

ui/src/Components/Fetcher/index.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { mount } from "enzyme";
 
 import { EmptyAPIResponse } from "__mocks__/Fetch";
 
@@ -28,74 +29,58 @@ afterEach(() => {
   global.fetch.mockRestore();
 });
 
+const MountedFetcher = () => {
+  return mount(
+    <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
+  );
+};
+
+const FetcherSpan = (label, interval) =>
+  `<span data-filters="${label}" data-interval="${interval}"></span>`;
+
 describe("<Fetcher />", () => {
   it("renders correctly with 'label=value' filter", () => {
-    const tree = renderer
-      .create(<Fetcher alertStore={alertStore} settingsStore={settingsStore} />)
-      .toJSON();
-
-    expect(tree.props["data-filters"]).toBe("label=value");
-    expect(tree.props["data-interval"]).toBe(30);
+    const tree = MountedFetcher();
+    expect(tree.html()).toBe(FetcherSpan("label=value", 30));
   });
 
   it("re-renders on fetch interval change", () => {
-    const fetcher = renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
-
-    expect(fetcher.toJSON().props["data-interval"]).toBe(30);
+    const tree = MountedFetcher();
+    expect(tree.html()).toBe(FetcherSpan("label=value", 30));
     settingsStore.fetchConfig.config.interval = 60;
-    expect(fetcher.toJSON().props["data-interval"]).toBe(60);
+    expect(tree.html()).toBe(FetcherSpan("label=value", 60));
   });
 
   it("re-renders on filters change", () => {
-    const fetcher = renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
-
-    expect(fetcher.toJSON().props["data-filters"]).toBe("label=value");
+    const tree = MountedFetcher();
+    expect(tree.html()).toBe(FetcherSpan("label=value", 30));
     alertStore.filters.values = [];
-    expect(fetcher.toJSON().props["data-filters"]).toBe("");
+    expect(tree.html()).toBe(FetcherSpan("", 30));
   });
 
   it("calls alertStore.fetchWithThrottle on mount", () => {
     const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
-
-    renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
-
+    MountedFetcher();
     expect(fetchSpy).toHaveBeenCalledTimes(1);
   });
 
   it("calls alertStore.fetchWithThrottle again after interval change", () => {
     const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
-
-    renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
+    MountedFetcher();
     settingsStore.fetchConfig.config.interval = 60;
-
     expect(fetchSpy).toHaveBeenCalledTimes(2);
   });
 
   it("calls alertStore.fetchWithThrottle again after filter change", () => {
     const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
-
-    renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
+    MountedFetcher();
     alertStore.filters.values = [];
-
     expect(fetchSpy).toHaveBeenCalledTimes(2);
   });
 
   it("keeps calling alertStore.fetchWithThrottle after running pending timers", () => {
     const fetchSpy = jest.spyOn(alertStore, "fetchWithThrottle");
-
-    renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
+    MountedFetcher();
     jest.runOnlyPendingTimers();
     expect(fetchSpy).toHaveBeenCalledTimes(2);
     jest.runOnlyPendingTimers();
@@ -105,18 +90,14 @@ describe("<Fetcher />", () => {
   });
 
   it("internal timer is armed after render", () => {
-    const fetcher = renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
-    const instance = fetcher.getInstance();
+    const tree = MountedFetcher();
+    const instance = tree.instance();
     expect(instance.timer).toBeGreaterThanOrEqual(0);
   });
 
   it("internal timer is null after unmount", () => {
-    const fetcher = renderer.create(
-      <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
-    );
-    const instance = fetcher.getInstance();
+    const tree = MountedFetcher();
+    const instance = tree.instance();
     instance.componentWillUnmount();
     expect(instance.timer).toBeNull();
   });

ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap

@@ -1,37 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FatalError /> matches snapshot 1`] = `
-<div
-  className="jumbotron text-center bg-primary my-4"
->
-  <div
-    className="container-fluid"
-  >
-    <h1
-      className="display-1 my-5 text-danger"
-    >
-      <svg
-        aria-hidden="true"
-        className="svg-inline--fa fa-exclamation-circle fa-w-16 "
-        data-icon="exclamation-circle"
-        data-prefix="fas"
-        role="img"
-        style={Object {}}
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+"
+<div class=\\"jumbotron text-center bg-primary my-4\\">
+  <div class=\\"container-fluid\\">
+    <h1 class=\\"display-1 my-5 text-danger\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"exclamation-circle\\"
+           class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
       >
-        <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-          fill="currentColor"
-          style={Object {}}
-        />
+        <path fill=\\"currentColor\\"
+              d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
+        >
+        </path>
       </svg>
     </h1>
-    <p
-      className="lead text-muted"
-    >
+    <p class=\\"lead text-muted\\">
       foo bar
     </p>
   </div>
 </div>
+"
 `;

ui/src/Components/Grid/FatalError/index.test.js

@@ -1,11 +1,14 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { FatalError } from ".";
 
 describe("<FatalError />", () => {
   it("matches snapshot", () => {
-    const tree = renderer.create(<FatalError message="foo bar" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = shallow(<FatalError message="foo bar" />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });

ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap

@@ -1,21 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<UpstreamError /> matches snapshot 1`] = `
-<div
-  className="alert alert-danger text-center"
-  role="alert"
+"
+<div class=\\"alert alert-danger text-center\\"
+     role=\\"alert\\"
 >
-  <h4
-    className="alert-heading mb-0"
-  >
-    Alertmanager 
-    <span
-      className="font-weight-bold"
-    >
+  <h4 class=\\"alert-heading mb-0\\">
+    Alertmanager
+    <span class=\\"font-weight-bold\\">
       foo
     </span>
-     raised an error: 
-    bar
+    raised an error: bar
   </h4>
 </div>
+"
 `;

ui/src/Components/Grid/UpstreamError/index.test.js

@@ -1,13 +1,14 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { UpstreamError } from ".";
 
 describe("<UpstreamError />", () => {
   it("matches snapshot", () => {
-    const tree = renderer
-      .create(<UpstreamError name="foo" message="bar" />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = shallow(<UpstreamError name="foo" message="bar" />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });

ui/src/Components/Labels/BaseLabel/index.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { shallow } from "enzyme";
 
 import { AlertStore } from "Stores/AlertStore";
 
@@ -19,7 +20,7 @@ const FakeBaseLabel = () => {
       return null;
     }
   }
-  return renderer.create(
+  return shallow(
     <RenderableBaseLabel alertStore={alertStore} name="foo" value="bar" />
   );
 };
@@ -27,40 +28,40 @@ const FakeBaseLabel = () => {
 describe("<BaseLabel />", () => {
   it("isStaticColorLabel() returns true for labels present in staticColorLabels", () => {
     alertStore.settings.values.staticColorLabels = ["foo", "job", "bar"];
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.isStaticColorLabel("job")).toBeTruthy();
   });
 
   it("isStaticColorLabel() returns false for labels not present in staticColorLabels", () => {
     alertStore.settings.values.staticColorLabels = ["foo"];
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.isStaticColorLabel("job")).toBeFalsy();
   });
 
   it("getColorClass() on a label included in staticColorLabels should return 'info'", () => {
     alertStore.settings.values.staticColorLabels = ["job"];
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorClass("job", "foo")).toBe("info");
   });
 
   it("getColorClass() on a label without any special color should return 'warning'", () => {
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorClass("foo", "bar")).toBe("warning");
   });
 
   it("getColorClass() on 'alertname' label should return 'dark'", () => {
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorClass("alertname", "foo")).toBe("dark");
   });
 
   it("getColorStyle() on a label included in staticColorLabels should be empty", () => {
     alertStore.settings.values.staticColorLabels = ["job"];
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorStyle("job", "bar")).toMatchObject({});
   });
 
   it("getColorStyle() on a label without any color information should be empty", () => {
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorStyle("foo", "bar")).toMatchObject({});
   });
 
@@ -71,7 +72,7 @@ describe("<BaseLabel />", () => {
         background: { red: 4, green: 5, blue: 6, alpha: 200 }
       }
     };
-    const instance = FakeBaseLabel().getInstance();
+    const instance = FakeBaseLabel().instance();
     expect(instance.getColorStyle("foo", "bar")).toMatchObject({
       color: "rgba(1, 2, 3, 100)",
       backgroundColor: "rgba(4, 5, 6, 200)"

ui/src/Components/Labels/FilteringCounterBadge/index.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { mount, render } from "enzyme";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 
@@ -12,47 +13,39 @@ beforeEach(() => {
 });
 
 const validateClassName = (value, className) => {
-  const tree = renderer
-    .create(
-      <FilteringCounterBadge
-        alertStore={alertStore}
-        name="@state"
-        value={value}
-        counter={1}
-      />
-    )
-    .toJSON();
-  expect(tree.props.className.split(" ")).toContain(className);
+  const tree = mount(
+    <FilteringCounterBadge
+      alertStore={alertStore}
+      name="@state"
+      value={value}
+      counter={1}
+    />
+  );
+  expect(tree.find("span").hasClass(className)).toBe(true);
 };
 
 const validateStyle = value => {
-  const tree = renderer
-    .create(
-      <FilteringCounterBadge
-        alertStore={alertStore}
-        name="@state"
-        value={value}
-        counter={1}
-      />
-    )
-    .toJSON();
-  expect(tree.props.style).toMatchObject({});
+  const tree = mount(
+    <FilteringCounterBadge
+      alertStore={alertStore}
+      name="@state"
+      value={value}
+      counter={1}
+    />
+  );
+  expect(tree.find("span").prop("style")).toEqual({});
 };
 
 const validateOnClick = value => {
-  const tree = renderer
-    .create(
-      <FilteringCounterBadge
-        alertStore={alertStore}
-        name="@state"
-        value={value}
-        counter={1}
-      />
-    )
-    .toJSON();
-
-  tree.props.onClick({ preventDefault: () => {} });
-
+  const tree = mount(
+    <FilteringCounterBadge
+      alertStore={alertStore}
+      name="@state"
+      value={value}
+      counter={1}
+    />
+  );
+  tree.simulate("click");
   expect(alertStore.filters.values).toHaveLength(1);
   expect(alertStore.filters.values).toContainEqual(
     NewUnappliedFilter(`@state=${value}`)
@@ -81,17 +74,15 @@ describe("<FilteringCounterBadge />", () => {
   });
 
   it("counter badge should have correct children based on the counter prop value", () => {
-    const tree = renderer
-      .create(
-        <FilteringCounterBadge
-          alertStore={alertStore}
-          name="@state"
-          value="active"
-          counter={123}
-        />
-      )
-      .toJSON();
-    expect(tree.children).toEqual(["123"]);
+    const tree = render(
+      <FilteringCounterBadge
+        alertStore={alertStore}
+        name="@state"
+        value="active"
+        counter={123}
+      />
+    );
+    expect(tree.text()).toBe("123");
   });
 
   it("onClick method on @state=unprocessed counter badge should add a new filter", () => {

ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilteringLabel /> matches snapshot 1`] = `
+"
+<span class=\\"components-label components-label-with-hover text-nowrap text-truncate badge badge-warning mw-100\\">
+  foo: bar
+</span>
+"
+`;

ui/src/Components/Labels/FilteringLabel/index.test.js

@@ -1,5 +1,8 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 
@@ -12,20 +15,18 @@ beforeEach(() => {
 });
 
 const RenderAndClick = (name, value) => {
-  const tree = renderer
-    .create(
-      <FilteringLabel alertStore={alertStore} name={name} value={value} />
-    )
-    .toJSON();
-
-  tree.props.onClick({ preventDefault: () => {} });
+  const tree = mount(
+    <FilteringLabel alertStore={alertStore} name={name} value={value} />
+  );
+  tree.simulate("click");
 };
 
 describe("<FilteringLabel />", () => {
-  it("renders without crashing", () => {
-    renderer.create(
+  it("matches snapshot", () => {
+    const tree = mount(
       <FilteringLabel alertStore={alertStore} name="foo" value="bar" />
     );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("calling onClick() adds a new filter 'foo=bar'", () => {

ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.test.js

@@ -1,7 +1,8 @@
 import React from "react";
-import renderer from "react-test-renderer";
 
-import InputRange from "react-input-range";
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { Settings } from "Stores/Settings";
 import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
@@ -12,32 +13,30 @@ beforeEach(() => {
 });
 
 const FakeConfiguration = () => {
-  return renderer.create(
-    <AlertGroupConfiguration settingsStore={settingsStore} />
-  );
+  return mount(<AlertGroupConfiguration settingsStore={settingsStore} />);
 };
 
 describe("<AlertGroupConfiguration /> className", () => {
   it("matches snapshot with default values", () => {
-    const tree = FakeConfiguration().toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = FakeConfiguration();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("call to onChange() updates internal state", () => {
-    const tree = FakeConfiguration().toTree();
-    tree.instance.onChange(11);
-    expect(tree.instance.config.defaultRenderCount).toBe(11);
+    const tree = FakeConfiguration();
+    tree.instance().onChange(11);
+    expect(tree.instance().config.defaultRenderCount).toBe(11);
   });
 
   it("settings are updated on completed change", () => {
-    const tree = FakeConfiguration().toTree();
-    tree.instance.onChangeComplete(96);
+    const tree = FakeConfiguration();
+    tree.instance().onChangeComplete(96);
     expect(settingsStore.alertGroupConfig.config.defaultRenderCount).toBe(96);
   });
 
   it("custom interval value is rendered correctly", () => {
     settingsStore.alertGroupConfig.config.defaultRenderCount = 55;
     const component = FakeConfiguration();
-    expect(component.root.findByType(InputRange).props.value).toBe(55);
+    expect(component.find("InputRange").props().value).toBe(55);
   });
 });

ui/src/Components/MainModal/Configuration/FetchConfiguration.test.js

@@ -1,7 +1,8 @@
 import React from "react";
-import renderer from "react-test-renderer";
 
-import InputRange from "react-input-range";
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { Settings } from "Stores/Settings";
 import { FetchConfiguration } from "./FetchConfiguration";
@@ -12,30 +13,30 @@ beforeEach(() => {
 });
 
 const FakeConfiguration = () => {
-  return renderer.create(<FetchConfiguration settingsStore={settingsStore} />);
+  return mount(<FetchConfiguration settingsStore={settingsStore} />);
 };
 
 describe("<FetchConfiguration /> className", () => {
   it("matches snapshot with default values", () => {
-    const tree = FakeConfiguration().toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = FakeConfiguration();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("call to onChange() updates internal state", () => {
-    const tree = FakeConfiguration().toTree();
-    tree.instance.onChange(55);
-    expect(tree.instance.config.fetchInterval).toBe(55);
+    const tree = FakeConfiguration();
+    tree.instance().onChange(55);
+    expect(tree.instance().config.fetchInterval).toBe(55);
   });
 
   it("settings are updated on completed change", () => {
-    const tree = FakeConfiguration().toTree();
-    tree.instance.onChangeComplete(123);
+    const tree = FakeConfiguration();
+    tree.instance().onChangeComplete(123);
     expect(settingsStore.fetchConfig.config.interval).toBe(123);
   });
 
   it("custom interval value is rendered correctly", () => {
     settingsStore.fetchConfig.config.interval = 66;
     const component = FakeConfiguration();
-    expect(component.root.findByType(InputRange).props.value).toBe(66);
+    expect(component.find("InputRange").props().value).toBe(66);
   });
 });

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap

@@ -1,88 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AlertGroupConfiguration /> className matches snapshot with default values 1`] = `
-<div
-  className="form-group text-center"
->
-  <label
-    className="mb-4"
-  >
+"
+<div class=\\"form-group text-center\\">
+  <label class=\\"mb-4\\">
     Default number of alerts to show per group
   </label>
-  <div
-    aria-disabled={false}
-    className="input-range"
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onTouchStart={[Function]}
+  <div aria-disabled=\\"false\\"
+       class=\\"input-range\\"
   >
-    <span
-      className="input-range__label input-range__label--min"
-    >
-      <span
-        className="input-range__label-container"
-      >
+    <span class=\\"input-range__label input-range__label--min\\">
+      <span class=\\"input-range__label-container\\">
         1
       </span>
     </span>
-    <div
-      className="input-range__track input-range__track--background"
-      onMouseDown={[Function]}
-      onTouchStart={[Function]}
-    >
-      <div
-        className="input-range__track input-range__track--active"
-        style={
-          Object {
-            "left": "0%",
-            "width": "44.44444444444444%",
-          }
-        }
-      />
-      <span
-        className="input-range__slider-container"
-        style={
-          Object {
-            "left": "44.44444444444444%",
-            "position": "absolute",
-          }
-        }
+    <div class=\\"input-range__track input-range__track--background\\">
+      <div style=\\"left: 0%; width: 44.44444444444444%;\\"
+           class=\\"input-range__track input-range__track--active\\"
       >
-        <span
-          className="input-range__label input-range__label--value"
-        >
-          <span
-            className="input-range__label-container"
-          >
+      </div>
+      <span class=\\"input-range__slider-container\\"
+            style=\\"position: absolute; left: 44.44444444444444%;\\"
+      >
+        <span class=\\"input-range__label input-range__label--value\\">
+          <span class=\\"input-range__label-container\\">
             5
           </span>
         </span>
-        <div
-          aria-controls={undefined}
-          aria-labelledby={undefined}
-          aria-valuemax={10}
-          aria-valuemin={1}
-          aria-valuenow={5}
-          className="input-range__slider"
-          draggable="false"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-          role="slider"
-          tabIndex="0"
-        />
+        <div aria-valuemax=\\"10\\"
+             aria-valuemin=\\"1\\"
+             aria-valuenow=\\"5\\"
+             class=\\"input-range__slider\\"
+             draggable=\\"false\\"
+             role=\\"slider\\"
+             tabindex=\\"0\\"
+        >
+        </div>
       </span>
     </div>
-    <span
-      className="input-range__label input-range__label--max"
-    >
-      <span
-        className="input-range__label-container"
-      >
+    <span class=\\"input-range__label input-range__label--max\\">
+      <span class=\\"input-range__label-container\\">
         10
       </span>
     </span>
   </div>
 </div>
+"
 `;

ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap

@@ -1,88 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FetchConfiguration /> className matches snapshot with default values 1`] = `
-<div
-  className="form-group text-center"
->
-  <label
-    className="mb-4"
-  >
+"
+<div class=\\"form-group text-center\\">
+  <label class=\\"mb-4\\">
     Refresh interval
   </label>
-  <div
-    aria-disabled={false}
-    className="input-range"
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onTouchStart={[Function]}
+  <div aria-disabled=\\"false\\"
+       class=\\"input-range\\"
   >
-    <span
-      className="input-range__label input-range__label--min"
-    >
-      <span
-        className="input-range__label-container"
-      >
+    <span class=\\"input-range__label input-range__label--min\\">
+      <span class=\\"input-range__label-container\\">
         10s
       </span>
     </span>
-    <div
-      className="input-range__track input-range__track--background"
-      onMouseDown={[Function]}
-      onTouchStart={[Function]}
-    >
-      <div
-        className="input-range__track input-range__track--active"
-        style={
-          Object {
-            "left": "0%",
-            "width": "18.181818181818183%",
-          }
-        }
-      />
-      <span
-        className="input-range__slider-container"
-        style={
-          Object {
-            "left": "18.181818181818183%",
-            "position": "absolute",
-          }
-        }
+    <div class=\\"input-range__track input-range__track--background\\">
+      <div style=\\"left: 0%; width: 18.181818181818183%;\\"
+           class=\\"input-range__track input-range__track--active\\"
       >
-        <span
-          className="input-range__label input-range__label--value"
-        >
-          <span
-            className="input-range__label-container"
-          >
+      </div>
+      <span class=\\"input-range__slider-container\\"
+            style=\\"position: absolute; left: 18.181818181818183%;\\"
+      >
+        <span class=\\"input-range__label input-range__label--value\\">
+          <span class=\\"input-range__label-container\\">
             30s
           </span>
         </span>
-        <div
-          aria-controls={undefined}
-          aria-labelledby={undefined}
-          aria-valuemax={120}
-          aria-valuemin={10}
-          aria-valuenow={30}
-          className="input-range__slider"
-          draggable="false"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-          role="slider"
-          tabIndex="0"
-        />
+        <div aria-valuemax=\\"120\\"
+             aria-valuemin=\\"10\\"
+             aria-valuenow=\\"30\\"
+             class=\\"input-range__slider\\"
+             draggable=\\"false\\"
+             role=\\"slider\\"
+             tabindex=\\"0\\"
+        >
+        </div>
       </span>
     </div>
-    <span
-      className="input-range__label input-range__label--max"
-    >
-      <span
-        className="input-range__label-container"
-      >
+    <span class=\\"input-range__label input-range__label--max\\">
+      <span class=\\"input-range__label-container\\">
         120s
       </span>
     </span>
   </div>
 </div>
+"
 `;

ui/src/Components/MainModal/Help.test.js

@@ -1,11 +1,14 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { Help } from "./Help";
 
 describe("<Help />", () => {
   it("matches snapshot", () => {
-    const tree = renderer.create(<Help />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = shallow(<Help />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });

ui/src/Components/MainModal/MainModalContent.test.js

@@ -1,6 +1,8 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import renderer from "react-test-renderer";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -10,28 +12,14 @@ let alertStore;
 let settingsStore;
 const onHide = jest.fn();
 
-beforeAll(() => {
-  // modal renders into document.body using portals, but that isn't working
-  // out of the box with react-test-renderer, a workaround is needed based on
-  // https://github.com/facebook/react/issues/11565#issuecomment-380143358
-  ReactDOM.createPortal = jest.fn((element, node) => {
-    return element;
-  });
-});
-
 beforeEach(() => {
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
   onHide.mockClear();
 });
 
-afterEach(() => {
-  // https://github.com/facebook/react/issues/11565#issuecomment-380143358
-  ReactDOM.createPortal.mockClear();
-});
-
 const FakeModal = () => {
-  return renderer.create(
+  return mount(
     <MainModalContent
       alertStore={alertStore}
       settingsStore={settingsStore}
@@ -42,30 +30,25 @@ const FakeModal = () => {
 
 const ValidateSetTab = (title, callArg) => {
   const component = FakeModal();
-  const instance = component.getInstance();
+  const instance = component.instance();
   const setTabSpy = jest.spyOn(instance.tab, "setTab");
 
-  const helpTab = component.root.findByProps({ title: title });
-  helpTab.props.onClick();
-
+  const tab = component.find({ title: title });
+  tab.simulate("click");
   expect(setTabSpy).toHaveBeenCalledWith(callArg);
+  expect(component.find(".nav-link.active").text()).toBe(title);
 };
 
 describe("<MainModalContent />", () => {
   it("matches snapshot", () => {
-    const tree = FakeModal().toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = FakeModal();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("shows 'Configuration' tab by default", () => {
-    const component = FakeModal();
-    const tabs = component.root.findAll(testInstance => {
-      if (!testInstance.props.className) return false;
-      const classNames = testInstance.props.className.split(" ");
-      return classNames.includes("nav-link") && classNames.includes("active");
-    });
-    expect(tabs).toHaveLength(1);
-    expect(tabs[0].children).toContain("Configuration");
+    const tree = FakeModal();
+    const activeTab = tree.find(".nav-link.active");
+    expect(activeTab.text()).toBe("Configuration");
   });
 
   // modal makes it tricky to verify re-rendered content, so only check if we

ui/src/Components/MainModal/__snapshots__/Help.test.js.snap

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Help /> matches snapshot 1`] = `
+"
 <div>
-  <h4
-    className="text-center"
-  >
+  <h4 class=\\"text-center\\">
     Filter operators
   </h4>
   <dl>
@@ -12,22 +11,17 @@ exports[`<Help /> matches snapshot 1`] = `
       <kbd>
         =
       </kbd>
-       
       Exact match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          =
-          value
+          key=value
         </code>
       </div>
       <div>
-        True if compared alert attribute value is equal to 
+        True if compared alert attribute value is equal to
         <code>
           value
         </code>
@@ -38,22 +32,17 @@ exports[`<Help /> matches snapshot 1`] = `
       <kbd>
         !=
       </kbd>
-       
       Negative match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          !=
-          value
+          key!=value
         </code>
       </div>
       <div>
-        True if compared alert attribute is missing or have a value that is not equal to 
+        True if compared alert attribute is missing or have a value that is not equal to
         <code>
           value
         </code>
@@ -64,52 +53,41 @@ exports[`<Help /> matches snapshot 1`] = `
       <kbd>
         =~
       </kbd>
-       
       Regular expression match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          =~
-          value
+          key=~value
         </code>
       </div>
       <div>
-        True if compared alert attribute value matches 
+        True if compared alert attribute value matches
         <code>
           value
         </code>
-         regex.
+        regex.
       </div>
     </dd>
     <dt>
       <kbd>
         !~
       </kbd>
-       
       Negative regular expression match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          !~
-          value
+          key!~value
         </code>
       </div>
       <div>
-        False if compared alert attribute value matches 
+        False if compared alert attribute value matches
         <code>
           value
         </code>
-         
         regex.
       </div>
     </dd>
@@ -117,23 +95,17 @@ exports[`<Help /> matches snapshot 1`] = `
       <kbd>
         &gt;
       </kbd>
-       
       Greater than match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          &gt;
-          value
+          key&gt;value
         </code>
       </div>
       <div>
         True if compared alert attribute value is greater than
-         
         <code>
           value
         </code>
@@ -144,22 +116,17 @@ exports[`<Help /> matches snapshot 1`] = `
       <kbd>
         &lt;
       </kbd>
-       
       Less than match
     </dt>
-    <dd
-      className="mb-3"
-    >
+    <dd class=\\"mb-3\\">
       <div>
-        Example: 
+        Example:
         <code>
-          key
-          &lt;
-          value
+          key&lt;value
         </code>
       </div>
       <div>
-        True if compared alert attribue value is less than 
+        True if compared alert attribue value is less than
         <code>
           value
         </code>
@@ -167,52 +134,33 @@ exports[`<Help /> matches snapshot 1`] = `
       </div>
     </dd>
   </dl>
-  <div
-    className="mt-5"
-  >
-    <h4
-      className="text-center"
-    >
+  <div class=\\"mt-5\\">
+    <h4 class=\\"text-center\\">
       Filtering using alert labels
     </h4>
     <dl>
       <dt>
         Match alerts based on any label
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             &gt;
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             &lt;
           </kbd>
         </div>
@@ -222,19 +170,16 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 alertname=UnableToPing
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 alertname
               </code>
-               equal to
-               
+              equal to
               <code>
                 UnableToPing
               </code>
@@ -243,19 +188,16 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 hostname=localhost
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 hostname
               </code>
-               equal to
-               
+              equal to
               <code>
                 localhost
               </code>
@@ -264,19 +206,16 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 service!=apache3
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 service
               </code>
-               missing or not equal to
-               
+              missing or not equal to
               <code>
                 apache3
               </code>
@@ -285,18 +224,16 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 service=~apache
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 service
               </code>
-               matching regular expression 
+              matching regular expression
               <code>
                 /.*apache.*/
               </code>
@@ -305,18 +242,16 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 service=~apache[1-3]
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 service
               </code>
-               matching regular expression 
+              matching regular expression
               <code>
                 /.*apache[1-3].*/
               </code>
@@ -325,23 +260,20 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 priority&gt;4
               </span>
             </div>
             <div>
-              Match alerts with label 
+              Match alerts with label
               <code>
                 priority
               </code>
-               value
-               
+              value
               <code>
                 &gt;
               </code>
-               than 
+              than
               <code>
                 4
               </code>
@@ -352,42 +284,27 @@ exports[`<Help /> matches snapshot 1`] = `
       </dd>
     </dl>
   </div>
-  <div
-    className="mt-5"
-  >
-    <h4
-      className="text-center"
-    >
+  <div class=\\"mt-5\\">
+    <h4 class=\\"text-center\\">
       Filtering alerts using special filters
     </h4>
     <dl>
       <dt>
         Match alerts based on the Alertmanager instance name they were collected from
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !~
           </kbd>
         </div>
@@ -397,15 +314,12 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @alertmanager=prod
               </span>
             </div>
             <div>
               Match alerts collected from Alertmanager instance named
-               
               <code>
                 prod
               </code>
@@ -414,14 +328,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @alertmanager!=dev
               </span>
             </div>
             <div>
-              Match alerts collected from Alertmanager instances except for the one named 
+              Match alerts collected from Alertmanager instances except for the one named
               <code>
                 dev
               </code>
@@ -430,14 +342,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @alertmanager=~prod
               </span>
             </div>
             <div>
-              Match alerts collected from Alertmanager instances with names matching regular expression 
+              Match alerts collected from Alertmanager instances with names matching regular expression
               <code>
                 /.*prod.*/
               </code>
@@ -449,30 +359,19 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Match alerts based on the receiver name
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !~
           </kbd>
         </div>
@@ -482,9 +381,7 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @receiver=default
               </span>
             </div>
@@ -494,9 +391,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @receiver!=hipchat
               </span>
             </div>
@@ -506,14 +401,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @receiver=~email
               </span>
             </div>
             <div>
-              Match alerts sent to any receiver with name matching regular expression 
+              Match alerts sent to any receiver with name matching regular expression
               <code>
                 /.*email.*/
               </code>
@@ -525,20 +418,13 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Match alerts based on the state
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
         </div>
@@ -548,9 +434,7 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @state=active
               </span>
             </div>
@@ -560,9 +444,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @state!=active
               </span>
             </div>
@@ -572,9 +454,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @state=suppressed
               </span>
             </div>
@@ -584,9 +464,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @state=unprocessed
               </span>
             </div>
@@ -599,30 +477,19 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Match alerts based on the author of silence
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !~
           </kbd>
         </div>
@@ -632,14 +499,12 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_author=me@example.com
               </span>
             </div>
             <div>
-              Match alerts silenced by 
+              Match alerts silenced by
               <code>
                 me@example.com
               </code>
@@ -648,15 +513,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_author!=me@example.com
               </span>
             </div>
             <div>
               Match alerts silenced by everyone except
-               
               <code>
                 foo@example.com
               </code>
@@ -665,15 +527,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_author=~@example.com
               </span>
             </div>
             <div>
               Match alerts silenced by author matching regular expression
-               
               <code>
                 /.*@example.com.*/
               </code>
@@ -685,30 +544,19 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Match alerts based on the jira linked in the silence
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !=
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =~
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             !~
           </kbd>
         </div>
@@ -716,22 +564,17 @@ exports[`<Help /> matches snapshot 1`] = `
           Examples:
         </div>
         <ul>
-          <div
-            className="text-warning"
-          >
+          <div class=\\"text-warning\\">
             This is supported only if JIRA regexp are enabled and able to match JIRA ids in the silence comment body.
           </div>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_jira=PROJECT-123
               </span>
             </div>
             <div>
               Match silenced alerts where detected JIRA issue id is equal to
-               
               <code>
                 PROJECT-123
               </code>
@@ -740,15 +583,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_jira!=PROJECT-123
               </span>
             </div>
             <div>
               Match silenced alerts where detected JIRA issue id is different than
-               
               <code>
                 PROJECT-123
               </code>
@@ -757,14 +597,12 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @silence_jira=~PROJECT
               </span>
             </div>
             <div>
-              Match silenced alerts where detected JIRA issue id matches regular expression 
+              Match silenced alerts where detected JIRA issue id matches regular expression
               <code>
                 /.*PROJECT.*/
               </code>
@@ -776,15 +614,10 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Limit number of displayed alerts
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             =
           </kbd>
         </div>
@@ -792,16 +625,12 @@ exports[`<Help /> matches snapshot 1`] = `
           Examples:
         </div>
         <ul>
-          <div
-            className="text-warning"
-          >
+          <div class=\\"text-warning\\">
             Value must be a number &gt;= 1.
           </div>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @limit=10
               </span>
             </div>
@@ -814,20 +643,13 @@ exports[`<Help /> matches snapshot 1`] = `
       <dt>
         Match alerts based on creation timestamp
       </dt>
-      <dd
-        className="mb-5"
-      >
+      <dd class=\\"mb-5\\">
         <div>
           Supported operators:
-           
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             &gt;
           </kbd>
-          <kbd
-            className="mr-1"
-          >
+          <kbd class=\\"mr-1\\">
             &lt;
           </kbd>
         </div>
@@ -837,9 +659,7 @@ exports[`<Help /> matches snapshot 1`] = `
         <ul>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @age&gt;15m
               </span>
             </div>
@@ -849,9 +669,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @age&gt;1h
               </span>
             </div>
@@ -861,9 +679,7 @@ exports[`<Help /> matches snapshot 1`] = `
           </li>
           <li>
             <div>
-              <span
-                className="badge badge-info"
-              >
+              <span class=\\"badge badge-info\\">
                 @age&lt;10h30m
               </span>
             </div>
@@ -876,4 +692,5 @@ exports[`<Help /> matches snapshot 1`] = `
     </dl>
   </div>
 </div>
+"
 `;

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap

@@ -1,39 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MainModalContent /> matches snapshot 1`] = `
-<div
-  className="modal d-block bg-primary-transparent-80"
-  role="dialog"
+"
+<div class=\\"modal d-block bg-primary-transparent-80\\"
+     role=\\"dialog\\"
 >
-  <div
-    className="modal-dialog modal-lg"
-    role="document"
+  <div class=\\"modal-dialog modal-lg\\"
+       role=\\"document\\"
   >
-    <div
-      className="modal-content"
-    >
-      <div
-        className="modal-header py-2"
-      >
-        <nav
-          className="nav nav-pills nav-justified w-100"
-        >
-          <a
-            className="nav-item nav-link cursor-pointer active"
-            onClick={[Function]}
-          >
+    <div class=\\"modal-content\\">
+      <div class=\\"modal-header py-2\\">
+        <nav class=\\"nav nav-pills nav-justified w-100\\">
+          <a class=\\"nav-item nav-link cursor-pointer active\\">
             Configuration
           </a>
-          <a
-            className="nav-item nav-link cursor-pointer text-primary"
-            onClick={[Function]}
-          >
+          <a class=\\"nav-item nav-link cursor-pointer text-primary\\">
             Help
           </a>
-          <button
-            className="close"
-            onClick={[Function]}
-            type="button"
+          <button type=\\"button\\"
+                  class=\\"close\\"
           >
             <span>
               ×
@@ -41,178 +26,91 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           </button>
         </nav>
       </div>
-      <div
-        className="modal-body"
-      >
-        <form
-          className="px-3"
-        >
-          <div
-            className="form-group text-center"
-          >
-            <label
-              className="mb-4"
-            >
+      <div class=\\"modal-body\\">
+        <form class=\\"px-3\\">
+          <div class=\\"form-group text-center\\">
+            <label class=\\"mb-4\\">
               Refresh interval
             </label>
-            <div
-              aria-disabled={false}
-              className="input-range"
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onTouchStart={[Function]}
+            <div aria-disabled=\\"false\\"
+                 class=\\"input-range\\"
             >
-              <span
-                className="input-range__label input-range__label--min"
-              >
-                <span
-                  className="input-range__label-container"
-                >
+              <span class=\\"input-range__label input-range__label--min\\">
+                <span class=\\"input-range__label-container\\">
                   10s
                 </span>
               </span>
-              <div
-                className="input-range__track input-range__track--background"
-                onMouseDown={[Function]}
-                onTouchStart={[Function]}
-              >
-                <div
-                  className="input-range__track input-range__track--active"
-                  style={
-                    Object {
-                      "left": "0%",
-                      "width": "18.181818181818183%",
-                    }
-                  }
-                />
-                <span
-                  className="input-range__slider-container"
-                  style={
-                    Object {
-                      "left": "18.181818181818183%",
-                      "position": "absolute",
-                    }
-                  }
+              <div class=\\"input-range__track input-range__track--background\\">
+                <div style=\\"left: 0%; width: 18.181818181818183%;\\"
+                     class=\\"input-range__track input-range__track--active\\"
                 >
-                  <span
-                    className="input-range__label input-range__label--value"
-                  >
-                    <span
-                      className="input-range__label-container"
-                    >
+                </div>
+                <span class=\\"input-range__slider-container\\"
+                      style=\\"position: absolute; left: 18.181818181818183%;\\"
+                >
+                  <span class=\\"input-range__label input-range__label--value\\">
+                    <span class=\\"input-range__label-container\\">
                       30s
                     </span>
                   </span>
-                  <div
-                    aria-controls={undefined}
-                    aria-labelledby={undefined}
-                    aria-valuemax={120}
-                    aria-valuemin={10}
-                    aria-valuenow={30}
-                    className="input-range__slider"
-                    draggable="false"
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    role="slider"
-                    tabIndex="0"
-                  />
+                  <div aria-valuemax=\\"120\\"
+                       aria-valuemin=\\"10\\"
+                       aria-valuenow=\\"30\\"
+                       class=\\"input-range__slider\\"
+                       draggable=\\"false\\"
+                       role=\\"slider\\"
+                       tabindex=\\"0\\"
+                  >
+                  </div>
                 </span>
               </div>
-              <span
-                className="input-range__label input-range__label--max"
-              >
-                <span
-                  className="input-range__label-container"
-                >
+              <span class=\\"input-range__label input-range__label--max\\">
+                <span class=\\"input-range__label-container\\">
                   120s
                 </span>
               </span>
             </div>
           </div>
-          <div
-            className="mt-5"
-          />
-          <div
-            className="form-group text-center"
-          >
-            <label
-              className="mb-4"
-            >
+          <div class=\\"mt-5\\">
+          </div>
+          <div class=\\"form-group text-center\\">
+            <label class=\\"mb-4\\">
               Default number of alerts to show per group
             </label>
-            <div
-              aria-disabled={false}
-              className="input-range"
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onTouchStart={[Function]}
+            <div aria-disabled=\\"false\\"
+                 class=\\"input-range\\"
             >
-              <span
-                className="input-range__label input-range__label--min"
-              >
-                <span
-                  className="input-range__label-container"
-                >
+              <span class=\\"input-range__label input-range__label--min\\">
+                <span class=\\"input-range__label-container\\">
                   1
                 </span>
               </span>
-              <div
-                className="input-range__track input-range__track--background"
-                onMouseDown={[Function]}
-                onTouchStart={[Function]}
-              >
-                <div
-                  className="input-range__track input-range__track--active"
-                  style={
-                    Object {
-                      "left": "0%",
-                      "width": "44.44444444444444%",
-                    }
-                  }
-                />
-                <span
-                  className="input-range__slider-container"
-                  style={
-                    Object {
-                      "left": "44.44444444444444%",
-                      "position": "absolute",
-                    }
-                  }
+              <div class=\\"input-range__track input-range__track--background\\">
+                <div style=\\"left: 0%; width: 44.44444444444444%;\\"
+                     class=\\"input-range__track input-range__track--active\\"
                 >
-                  <span
-                    className="input-range__label input-range__label--value"
-                  >
-                    <span
-                      className="input-range__label-container"
-                    >
+                </div>
+                <span class=\\"input-range__slider-container\\"
+                      style=\\"position: absolute; left: 44.44444444444444%;\\"
+                >
+                  <span class=\\"input-range__label input-range__label--value\\">
+                    <span class=\\"input-range__label-container\\">
                       5
                     </span>
                   </span>
-                  <div
-                    aria-controls={undefined}
-                    aria-labelledby={undefined}
-                    aria-valuemax={10}
-                    aria-valuemin={1}
-                    aria-valuenow={5}
-                    className="input-range__slider"
-                    draggable="false"
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    role="slider"
-                    tabIndex="0"
-                  />
+                  <div aria-valuemax=\\"10\\"
+                       aria-valuemin=\\"1\\"
+                       aria-valuenow=\\"5\\"
+                       class=\\"input-range__slider\\"
+                       draggable=\\"false\\"
+                       role=\\"slider\\"
+                       tabindex=\\"0\\"
+                  >
+                  </div>
                 </span>
               </div>
-              <span
-                className="input-range__label input-range__label--max"
-              >
-                <span
-                  className="input-range__label-container"
-                >
+              <span class=\\"input-range__label input-range__label--max\\">
+                <span class=\\"input-range__label-container\\">
                   10
                 </span>
               </span>
@@ -220,17 +118,13 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           </div>
         </form>
       </div>
-      <div
-        className="modal-footer"
-      >
-        <span
-          className="text-muted"
-        >
-          Version: 
-          unknown
+      <div class=\\"modal-footer\\">
+        <span class=\\"text-muted\\">
+          Version: unknown
         </span>
       </div>
     </div>
   </div>
 </div>
+"
 `;

ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.js.snap

@@ -1,47 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FetchIndicator /> matches snapshot when fetch is in progress 1`] = `
-<svg
-  aria-hidden="true"
-  className="svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted"
-  data-icon="circle-notch"
-  data-prefix="fas"
-  role="img"
-  style={
-    Object {
-      "opacity": 1,
-    }
-  }
-  viewBox="0 0 512 512"
-  xmlns="http://www.w3.org/2000/svg"
+"
+<svg aria-hidden=\\"true\\"
+     data-prefix=\\"fas\\"
+     data-icon=\\"circle-notch\\"
+     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted\\"
+     role=\\"img\\"
+     xmlns=\\"http://www.w3.org/2000/svg\\"
+     viewbox=\\"0 0 512 512\\"
+     style=\\"opacity: 1;\\"
 >
-  <path
-    d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"
-    fill="currentColor"
-    style={Object {}}
-  />
+  <path fill=\\"currentColor\\"
+        d=\\"M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z\\"
+  >
+  </path>
 </svg>
+"
 `;
 
 exports[`<FetchIndicator /> matches snapshot when idle 1`] = `
-<svg
-  aria-hidden="true"
-  className="svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted"
-  data-icon="circle-notch"
-  data-prefix="fas"
-  role="img"
-  style={
-    Object {
-      "opacity": 0,
-    }
-  }
-  viewBox="0 0 512 512"
-  xmlns="http://www.w3.org/2000/svg"
+"
+<svg aria-hidden=\\"true\\"
+     data-prefix=\\"fas\\"
+     data-icon=\\"circle-notch\\"
+     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted\\"
+     role=\\"img\\"
+     xmlns=\\"http://www.w3.org/2000/svg\\"
+     viewbox=\\"0 0 512 512\\"
+     style=\\"opacity: 0;\\"
 >
-  <path
-    d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"
-    fill="currentColor"
-    style={Object {}}
-  />
+  <path fill=\\"currentColor\\"
+        d=\\"M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z\\"
+  >
+  </path>
 </svg>
+"
 `;

ui/src/Components/NavBar/FetchIndicator/index.test.js

@@ -1,46 +1,45 @@
 import React from "react";
-import renderer from "react-test-renderer";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
 
 import { FetchIndicator } from ".";
 import { AlertStoreStatuses } from "Stores/AlertStore";
 
 describe("<FetchIndicator />", () => {
   it("opacity is 1 when fetch is in progress", () => {
-    const tree = renderer
-      .create(
-        <FetchIndicator status={AlertStoreStatuses.InProgress.toString()} />
-      )
-      .toJSON();
-    expect(tree.props.style.opacity).toEqual(1);
+    const tree = mount(
+      <FetchIndicator status={AlertStoreStatuses.InProgress.toString()} />
+    );
+    expect(tree.find("FontAwesomeIcon").props().style.opacity).toEqual(1);
   });
 
   it("opacity is 0 when idle", () => {
-    const tree = renderer
-      .create(<FetchIndicator status={AlertStoreStatuses.Idle.toString()} />)
-      .toJSON();
-    expect(tree.props.style.opacity).toEqual(0);
+    const tree = mount(
+      <FetchIndicator status={AlertStoreStatuses.Idle.toString()} />
+    );
+    expect(tree.find("FontAwesomeIcon").props().style.opacity).toEqual(0);
   });
 
   it("opacity is 0 when fetch failed", () => {
-    const tree = renderer
-      .create(<FetchIndicator status={AlertStoreStatuses.Failure.toString()} />)
-      .toJSON();
-    expect(tree.props.style.opacity).toEqual(0);
+    const tree = mount(
+      <FetchIndicator status={AlertStoreStatuses.Failure.toString()} />
+    );
+    expect(tree.find("FontAwesomeIcon").props().style.opacity).toEqual(0);
   });
 
   it("matches snapshot when fetch is in progress", () => {
-    const tree = renderer
-      .create(
-        <FetchIndicator status={AlertStoreStatuses.InProgress.toString()} />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = mount(
+      <FetchIndicator status={AlertStoreStatuses.InProgress.toString()} />
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot when idle", () => {
-    const tree = renderer
-      .create(<FetchIndicator status={AlertStoreStatuses.Idle.toString()} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+    const tree = mount(
+      <FetchIndicator status={AlertStoreStatuses.Idle.toString()} />
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });