--- a/devtools/client/webconsole/new-console-output/components/GripMessageBody.js
+++ b/devtools/client/webconsole/new-console-output/components/GripMessageBody.js
@@ -91,17 +91,17 @@ const forbiddenValuesRegexs = [
 function cleanupStyle(userProvidedStyle, createElement) {
   // Use a dummy element to parse the style string.
   let dummy = createElement("div");
   dummy.style = userProvidedStyle;
 
   // Return a style object as expected by React DOM components, e.g.
   // {color: "red"}
   // without forbidden properties and values.
-  return [...dummy.style]
+  return Array.from(dummy.style)
     .filter(name => {
       return allowedStylesRegex.test(name)
         && !forbiddenValuesRegexs.some(regex => regex.test(dummy.style[name]));
     })
     .reduce((object, name) => {
       return Object.assign({
         [name]: dummy.style[name]
       }, object);

--- a/devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js
@@ -22,36 +22,39 @@ const serviceContainer = require("devtoo
 
 describe("EvaluationResult component:", () => {
   it("renders a grip result", () => {
     const message = stubPreparedMessages.get("new Date(0)");
     const wrapper = render(EvaluationResult({ message, serviceContainer }));
 
     expect(wrapper.find(".message-body").text()).toBe("Date 1970-01-01T00:00:00.000Z");
 
-    expect(wrapper.find(".message.log").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("log")).toBe(true);
   });
 
   it("renders an error", () => {
     const message = stubPreparedMessages.get("asdf()");
     const wrapper = render(EvaluationResult({ message, serviceContainer }));
 
     expect(wrapper.find(".message-body").text())
       .toBe("ReferenceError: asdf is not defined[Learn More]");
 
-    expect(wrapper.find(".message.error").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
   });
 
   it("renders an error with a longString exception message", () => {
     const message = stubPreparedMessages.get("longString message Error");
     const wrapper = render(EvaluationResult({ message, serviceContainer }));
 
     const text = wrapper.find(".message-body").text();
     expect(text.startsWith("Error: Long error Long error")).toBe(true);
-    expect(wrapper.find(".message.error").length).toBe(1);
+    expect(wrapper.hasClass("message")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
   });
 
   it("renders an inspect command result", () => {
     const message = stubPreparedMessages.get("inspect({a: 1})");
     const wrapper = render(EvaluationResult({ message, serviceContainer }));
 
     expect(wrapper.find(".message-body").text()).toBe("Object { a: 1 }");
   });

--- a/devtools/client/webconsole/new-console-output/test/components/filter-button.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-button.test.js
@@ -14,22 +14,26 @@ describe("FilterButton component:", () =
   const props = {
     active: true,
     label: "Error",
     filterKey: MESSAGE_LEVEL.ERROR,
   };
 
   it("displays as active when turned on", () => {
     const wrapper = render(FilterButton(props));
-    expect(wrapper.html()).toBe(
-      "<button aria-pressed=\"true\" class=\"devtools-button error checked\">" +
-      "Error</button>"
-    );
+    expect(wrapper.is("button")).toBe(true);
+    expect(wrapper.hasClass("devtools-button")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
+    expect(wrapper.hasClass("checked")).toBe(true);
+    expect(wrapper.attr("aria-pressed")).toBe("true");
+    expect(wrapper.text()).toBe("Error");
   });
 
   it("displays as inactive when turned off", () => {
-    const inactiveProps = Object.assign({}, props, { active: false });
-    const wrapper = render(FilterButton(inactiveProps));
-    expect(wrapper.html()).toBe(
-      "<button aria-pressed=\"false\" class=\"devtools-button error\">Error</button>"
-    );
+    const wrapper = render(FilterButton({...props, active: false}));
+    expect(wrapper.is("button")).toBe(true);
+    expect(wrapper.hasClass("devtools-button")).toBe(true);
+    expect(wrapper.hasClass("error")).toBe(true);
+    expect(wrapper.hasClass("checked")).toBe(false);
+    expect(wrapper.attr("aria-pressed")).toBe("false");
+    expect(wrapper.text()).toBe("Error");
   });
 });

--- a/devtools/client/webconsole/new-console-output/test/components/filter-checkbox.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-checkbox.test.js
@@ -14,23 +14,22 @@ describe("FilterCheckbox component:", ()
     label: "test label",
     title: "test title",
     checked: true,
     onChange: () => {},
   };
 
   it("displays as checked", () => {
     const wrapper = render(FilterCheckbox(props));
-    expect(wrapper.html()).toBe(
-      '<label title="test title" class="filter-checkbox">' +
-      '<input type="checkbox" checked>test label</label>'
-    );
+    expect(wrapper.is("label")).toBe(true);
+    expect(wrapper.attr("title")).toBe("test title");
+    expect(wrapper.hasClass("filter-checkbox")).toBe(true);
+    expect(wrapper.html()).toBe('<input type="checkbox" checked>test label');
   });
 
   it("displays as unchecked", () => {
-    const uncheckedProps = Object.assign({}, props, { checked: false });
-    const wrapper = render(FilterCheckbox(uncheckedProps));
-    expect(wrapper.html()).toBe(
-      '<label title="test title" class="filter-checkbox">' +
-      '<input type="checkbox">test label</label>'
-    );
+    const wrapper = render(FilterCheckbox({...props, checked: false}));
+    expect(wrapper.is("label")).toBe(true);
+    expect(wrapper.attr("title")).toBe("test title");
+    expect(wrapper.hasClass("filter-checkbox")).toBe(true);
+    expect(wrapper.html()).toBe('<input type="checkbox">test label');
   });
 });