Merge pull request #114 from wuct/react-16

Add React 16 to peerdeps and clean up warning in tests

package.json

@@ -6,15 +6,18 @@
   "scripts": {
     "watch": "webpack-dev-server --config ./example/webpack.config.js",
     "lint": "eslint ./",
-    "test": "npm run lint && ava",
+    "test": "NODE_ENV=test npm run lint && NODE_ENV=test ava",
     "test:coverage": "nyc npm run test",
     "coverage": "nyc report --reporter=lcov > coverage.lcov && codecov",
     "build": "NODE_ENV=production babel src --out-dir lib",
     "prepublish": "npm run build",
     "precommit": "lint-staged"
   },
   "lint-staged": {
-    "*.js": ["prettier --write", "git add"]
+    "*.js": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "repository": {
     "type": "git",
@@ -36,12 +39,19 @@
   },
   "homepage": "https://github.com/wuct/react-dom-utils#readme",
   "babel": {
-    "presets": ["es2015", "stage-0", "react"]
+    "presets": [
+      "react-app"
+    ]
   },
   "ava": {
-    "files": ["./test/*.test.js"],
+    "files": [
+      "./test/*.test.js"
+    ],
     "babel": "inherit",
-    "require": ["babel-register", "./test/setupTest.js"]
+    "require": [
+      "babel-register",
+      "./test/setupTest.js"
+    ]
   },
   "dependencies": {
     "element-resize-detector": "^1.1.0",
@@ -53,12 +63,11 @@
     "babel-core": "^6.7.4",
     "babel-eslint": "8.0.2",
     "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-react-app": "^3.1.0",
     "babel-register": "^6.7.2",
     "codecov": "^3.0.0",
-    "enzyme": "^2.2.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.4",
     "eslint": "^4.1.0",
     "eslint-config-react-app": "^2.0.0",
     "eslint-plugin-flowtype": "^2.33.0",
@@ -73,17 +82,16 @@
     "nyc": "^11.0.3",
     "prettier": "^1.5.3",
     "raf-throttle": "^2.0.2",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "recompose": "^0.26.0",
     "simulant": "^0.2.0",
     "webpack": "^3.0.0",
     "webpack-dev-server": "^2.3.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0",
     "recompose": "^0.20.0 || ^0.21.0 || ^0.22.0  || ^0.26.0"
   }
 }

test/getOffsetToRoot.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { findDOMNode } from "react-dom";
 import test from "ava";
 import { mount } from "enzyme";
 import expect from "expect";
@@ -38,22 +37,31 @@ Object.defineProperties(window.HTMLElement.prototype, {
   }
 });
 
+class Div extends React.Component {
+  render() {
+    return (
+      <div style={this.props.style}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
 test("one level DOM tree", () => {
-  const Foo = () => <div style={{ marginTop: 10, marginLeft: 10 }} />;
-  const wrapper = mount(<Foo />);
-  const dom = findDOMNode(wrapper.instance());
+  const wrapper = mount(<Div style={{ marginTop: 10, marginLeft: 10 }} />);
+  const dom = wrapper.getDOMNode();
 
   expect(getOffsetToRoot(dom)).toEqual({ offsetTop: 10, offsetLeft: 10 });
 });
 
 test("two levels DOM tree", () => {
-  const Foo = () =>
-    <div style={{ marginTop: 1, marginLeft: 2 }}>
-      <div style={{ marginTop: 3, marginLeft: 4 }} className="bar" />
-    </div>;
+  const wrapper = mount(
+    <Div style={{ marginTop: 1, marginLeft: 2 }}>
+      <Div style={{ marginTop: 3, marginLeft: 4 }} />
+    </Div>
+  );
 
-  const wrapper = mount(<Foo />);
-  const dom = findDOMNode(wrapper.find("div").get(1));
+  const dom = wrapper.find(Div).last().getDOMNode();
 
   expect(getOffsetToRoot(dom)).toEqual({ offsetTop: 4, offsetLeft: 6 });
 });

test/mapPropsOnEvent.test.js

@@ -7,6 +7,12 @@ import simulant from "simulant";
 
 import mapPropsOnEvent from "../src/mapPropsOnEvent";
 
+class Div extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
 test("map props on window's events", () => {
   const mapSpy = expect.createSpy().andReturn({ foo: "bar" });
 
@@ -16,14 +22,14 @@ test("map props on window's events", () => {
     mapSpy,
     f => f,
     false
-  )("div");
+  )(Div);
 
   const wrapper = mount(<Container />);
 
   simulant.fire(window, "resize");
   expect(mapSpy.calls.length).toEqual(1);
 
-  expect(wrapper.find("div").props()).toEqual({ foo: "bar" });
+  expect(wrapper.find(Div).instance().props).toEqual({ foo: "bar" });
 
   simulant.fire(window, "resize");
   expect(mapSpy.calls.length).toEqual(2);
@@ -43,15 +49,15 @@ test("map props on dom's events", () => {
     mapSpy,
     f => f,
     false
-  )("div");
+  )(Div);
 
   const wrapper = mount(<Container />);
-  const dom = findDOMNode(wrapper.instance());
+  const dom = wrapper.getDOMNode();
 
   simulant.fire(dom, "click");
   expect(mapSpy.calls.length).toEqual(1);
 
-  expect(wrapper.find("div").props()).toEqual({ foo: "bar" });
+  expect(wrapper.find(Div).instance().props).toEqual({ foo: "bar" });
 
   simulant.fire(dom, "click");
   expect(mapSpy.calls.length).toEqual(2);

test/mapPropsOnScroll.test.js

@@ -5,18 +5,22 @@ import expect from "expect";
 import simulant from "simulant";
 
 import mapPropsOnScroll from "../src/mapPropsOnScroll";
+class Null extends React.Component {
+  render() {
+    return null;
+  }
+}
 
 test("map props on window's scroll event", () => {
   const mapSpy = expect.createSpy().andReturn({ foo: "bar" });
 
-  const Container = mapPropsOnScroll(mapSpy, f => f)("div");
+  const Container = mapPropsOnScroll(mapSpy, f => f)(Null);
 
   const wrapper = mount(<Container />);
 
   simulant.fire(window, "scroll");
   expect(mapSpy.calls.length).toEqual(1);
-
-  expect(wrapper.find("div").props()).toEqual({ foo: "bar" });
+  expect(wrapper.find(Null).instance().props).toEqual({ foo: "bar" });
 
   simulant.fire(window, "scroll");
   expect(mapSpy.calls.length).toEqual(2);

test/setupTest.js

@@ -1,5 +1,9 @@
+const { configure } = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
 const jsdom = require("jsdom");
 
+configure({ adapter: new Adapter() });
+
 const { JSDOM } = jsdom;
 
 const dom = new JSDOM("<!DOCTYPE html><body></body>");

test/withMousePosition.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { findDOMNode } from "react-dom";
 import test from "ava";
 import { mount } from "enzyme";
 import expect from "expect";
@@ -8,34 +7,40 @@ import identity from "lodash/identity";
 
 import withMousePosition, { defaultState } from "../src/withMousePosition";
 
+class Div extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
 test("append mousePosition when mousemove", () => {
-  const Container = withMousePosition(f => f)("div");
+  const Container = withMousePosition(f => f)(Div);
   const wrapper = mount(<Container />);
-  const dom = findDOMNode(wrapper.instance());
+  const dom = wrapper.getDOMNode();
 
   simulant.fire(dom, "mousemove", { screenX: 1 });
 
-  expect(wrapper.find("div").props()).toInclude({
+  expect(wrapper.find(Div).instance().props).toInclude({
     mousePosition: { screenX: 1 }
   });
 });
 
 test("reset mousePosition to default when mouseleave", () => {
-  const Container = withMousePosition(f => f)("div");
+  const Container = withMousePosition(f => f)(Div);
   const wrapper = mount(<Container />);
-  const dom = findDOMNode(wrapper.instance());
+  const dom = wrapper.getDOMNode();
 
   simulant.fire(dom, "mousemove");
   simulant.fire(dom, "mouseleave");
 
-  expect(wrapper.find("div").props()).toEqual(defaultState);
+  expect(wrapper.find(Div).instance().props).toEqual(defaultState);
 });
 
 test("invoke the provided throttle function only once", () => {
   const throttleSpy = expect.createSpy().andCall(identity);
-  const Container = withMousePosition(throttleSpy)("div");
+  const Container = withMousePosition(throttleSpy)(Div);
   const wrapper = mount(<Container />);
-  const dom = findDOMNode(wrapper.instance());
+  const dom = wrapper.getDOMNode();
 
   simulant.fire(dom, "mousemove");
   simulant.fire(dom, "mouseleave");
@@ -53,7 +58,7 @@ test("invoke the cancel function of the provided throttle when unmount", () => {
     return func;
   };
 
-  const Container = withMousePosition(fakeThrottle)("div");
+  const Container = withMousePosition(fakeThrottle)(Div);
   const wrapper = mount(<Container />);
 
   wrapper.unmount();

test/withOffsetToRoot.test.js

@@ -6,11 +6,17 @@ import simulant from "simulant";
 
 import withOffsetToRoot from "../src/withOffsetToRoot";
 
+class Div extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
 test("append offsetToRoot after mounting", () => {
-  const Container = withOffsetToRoot(f => f)("div");
+  const Container = withOffsetToRoot(f => f)(Div);
   const wrapper = mount(<Container />);
 
-  expect(wrapper.find("div").props()).toInclude({
+  expect(wrapper.find(Div).props()).toInclude({
     offsetToRoot: { offsetTop: 0, offsetLeft: 0 }
   });
 });

test/withSize.test.js

@@ -5,11 +5,17 @@ import expect from "expect";
 
 import withSize from "../src/withSize";
 
+class Div extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
 test("append DOMSize after mounting", () => {
-  const Container = withSize(f => f)("div");
+  const Container = withSize(f => f)(Div);
   const wrapper = mount(<Container />);
 
-  expect(wrapper.find("div").props()).toIncludeKey("DOMSize");
+  expect(wrapper.find(Div).props()).toIncludeKey("DOMSize");
 });
 
 test("invoke the cancel function of the provided throttle when unmount", () => {
@@ -21,7 +27,7 @@ test("invoke the cancel function of the provided throttle when unmount", () => {
     return func;
   };
 
-  const Container = withSize(fakeThrottle)("div");
+  const Container = withSize(fakeThrottle)(Div);
   const wrapper = mount(<Container />);
 
   wrapper.unmount();

test/withWindowSize.test.js

@@ -6,11 +6,17 @@ import simulant from "simulant";
 
 import withWindowSize, { pickedProps } from "../src/withWindowSize";
 
+class Div extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+
 test("append withWindowSize after mounting", () => {
-  const Container = withWindowSize(f => f)("div");
+  const Container = withWindowSize(f => f)(Div);
   const wrapper = mount(<Container />);
 
-  expect(wrapper.find("div").props().windowSize).toIncludeKeys(pickedProps);
+  expect(wrapper.find(Div).props().windowSize).toIncludeKeys(pickedProps);
 });
 
 test("update windowSize when the window is resized", () => {