Update devtools-components to React 16.

Needed a new version of Enzyme and some minor changes in tests.

Author: nchevobbe

packages/devtools-components/package.json

@@ -13,37 +13,40 @@
   "license": "MPL-2.0",
   "dependencies": {
     "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-dom-factories": "^1.0.2",
     "svg-inline-loader": "^0.8.0",
     "svg-inline-react": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^3.2.13",
-    "babel-jest": "^20.0.3",
+    "@storybook/react": "^3.3.14",
+    "babel-jest": "^22.4.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-react": "^6.24.1",
     "devtools-license-check": "^0.5.1",
-    "devtools-launchpad": "^0.0.100",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^3.12.0",
     "eslint-plugin-mozilla": "0.2.3",
     "fs-extra": "^2.0.0",
-    "jest": "^20.0.4",
-    "jest-cli": "^20.0.4",
+    "jest": "^22.4.2",
     "jest-flow-transform": "^1.0.1",
     "lodash": "^4.17.2"
   },
   "jest": {
     "rootDir": "src",
     "setupFiles": [
-      "<rootDir>/tests/__mocks__/request-animation-frame.js"
+      "<rootDir>/tests/__mocks__/request-animation-frame.js",
+      "<rootDir>/tests/setup.js"
     ],
     "testMatch": [
       "**/tests/**/*.js"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
-      "<rootDir>/tests/__mocks__/"
+      "<rootDir>/tests/__mocks__/",
+      "<rootDir>/tests/setup.js"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!devtools-)"

packages/devtools-components/src/tests/setup.js

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Configure enzyme with React 16 adapter.
+const Enzyme = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
+Enzyme.configure({ adapter: new Adapter() });

packages/devtools-components/src/tests/tree.js

@@ -98,8 +98,7 @@ describe("Tree", () => {
       className: "testClassName"
     });
 
-    expect(wrapper.hasClass("testClassName")).toBe(true);
-    expect(wrapper.hasClass("tree")).toBe(true);
+    expect(wrapper.find(".tree").hasClass("testClassName")).toBe(true);
   });
 
   it("renders as expected when passed a style", () => {
@@ -369,9 +368,9 @@ describe("Tree", () => {
 
     getTreeNodes(wrapper).forEach(n => {
       if ("ABECDMN".split("").includes(getSanitizedNodeText(n))) {
-        expect(n.find(".arrow.expanded").exists()).toBe(true);
+        expect(n.find("i.arrow.expanded").exists()).toBe(true);
       } else {
-        expect(n.find(".arrow").exists()).toBe(false);
+        expect(n.find("i.arrow").exists()).toBe(false);
       }
     });
   });
@@ -381,7 +380,7 @@ describe("Tree", () => {
     expect(formatTree(wrapper)).toMatchSnapshot();
 
     getTreeNodes(wrapper).forEach(n => {
-      const arrow = n.find(".arrow");
+      const arrow = n.find("i.arrow");
       expect(arrow.exists()).toBe(true);
       expect(arrow.hasClass("expanded")).toBe(false);
     });
@@ -442,7 +441,7 @@ function formatTree(wrapper) {
     .map((node) => {
       const level = node.prop("aria-level");
       const indentStr = "|  ".repeat(level || 0);
-      const arrow = node.find(".arrow");
+      const arrow = node.find("i.arrow");
       let arrowStr = "  ";
       if (arrow.exists()) {
         arrowStr = arrow.hasClass("expanded") ? "▼ " : "▶︎ ";