Merge pull request #196 from puffo/upgrade-to-react-16

Upgrade to React 16

.travis.yml

@@ -4,7 +4,7 @@ cache:
   directories:
     - node_modules
 node_js:
-  - "7.2.1"
-before_script: yarn add react@^15.4.2 react-dom@^15.4.2 --peer
+  - "8.9.1"
+before_script: yarn add react@^16.2.0 react-dom@^16.2.0 prop-types@~15.5.8 --peer
 after_success: yarn run coverage
 after_script: yarn run coveralls

__tests__/FlagDropDown.test.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-find-dom-node, no-eval */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
-import ReactTestUtils from 'react-addons-test-utils';
 import sinon from 'sinon';
 import fs from 'fs';
 import IntlTelInput from '../src/components/IntlTelInputApp';
@@ -89,11 +89,12 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names
   it('should not has .hide class after clicking flag component', () => {
     const subject = this.makeSubject();
     const flagComponent = subject.find(FlagDropDown);
-    const countryListComponent = subject.find(CountryList);
 
-    expect(countryListComponent.find('.country-list.hide').length).toBeTruthy();
+    expect(subject.find(CountryList).find('.country-list.hide').length).toBeTruthy();
     flagComponent.find('.selected-flag').simulate('click');
-    expect(countryListComponent.find('.country-list.hide').length).toBeFalsy();
+
+    subject.update();
+    expect(subject.find(CountryList).find('.country-list.hide').length).toBeFalsy();
   });
 
   it('Simulate change to Japan flag in dropdown before & after', () => {

__tests__/TelInput.test.js

@@ -181,7 +181,10 @@ describe('TelInput', function () { // eslint-disable-line func-names
     inputComponent.simulate('change', {
       target: { value: '0999 123 45' },
     });
-    expect(inputComponent.props().value).toBe('0999 123 45');
+
+    const changedInputComponent = subject.find(TelInput);
+
+    expect(changedInputComponent.props().value).toBe('0999 123 45');
   });
 
   it('ensurePlus', () => {
@@ -221,7 +224,10 @@ describe('TelInput', function () { // eslint-disable-line func-names
     const inputComponent = subject.find(TelInput);
 
     inputComponent.simulate('change', { target: { value: '+886901234567' } });
-    expect(inputComponent.props().value).toBe('+886901234567');
+
+    const changedInputComponent = subject.find(TelInput);
+
+    expect(changedInputComponent.props().value).toBe('+886901234567');
   });
 
   it('utils loaded', () => {
@@ -428,23 +434,25 @@ describe('TelInput', function () { // eslint-disable-line func-names
 
     it('should change input value on value prop change', () => {
       const subject = this.makeSubject();
-      const flagComponent = subject.find(FlagDropDown);
 
       subject.setProps({ value: '+447598455159' });
+      subject.update();
 
-      expect(flagComponent.props().highlightedCountry).toBe(1);
+      expect(subject.find(FlagDropDown).props().highlightedCountry).toBe(1);
 
       subject.setProps({ value: '+1(201) 555-0129' });
+      subject.update();
 
-      expect(flagComponent.props().highlightedCountry).toBe(0);
+      expect(subject.find(FlagDropDown).props().highlightedCountry).toBe(0);
     });
 
     it('should update country flag when value updates', () => {
       const subject = this.makeSubject();
-      const inputComponent = subject.find(TelInput);
 
       subject.setProps({ value: 'foo bar' });
-      expect(inputComponent.props().value).toBe('foo bar');
+      subject.update();
+
+      expect(subject.find(TelInput).props().value).toBe('foo bar');
     });
 
     it('should be able to delete country code after input field has been populated with number', () => {
@@ -474,13 +482,15 @@ describe('TelInput', function () { // eslint-disable-line func-names
       const inputComponent = subject.find(TelInput);
 
       inputComponent.simulate('change', { target: { value: '12345' } });
-      expect(inputComponent.props().value).toBe('12345');
+
+      const changedInputComponent = subject.find(TelInput);
+
+      expect(changedInputComponent.props().value).toBe('12345');
       expect(subject.state().value).toBe('12345');
     });
 
     it('should change props value', () => {
       const subject = this.makeSubject();
-      const inputComponent = subject.find(TelInput);
 
       requests[0].respond(200,
         { 'Content-Type': 'text/javascript' },
@@ -490,7 +500,10 @@ describe('TelInput', function () { // eslint-disable-line func-names
       subject.setState({
         value: '+886912345678',
       });
-      expect(inputComponent.props().value).toBe('+886912345678');
+
+      const changedInputComponent = subject.find(TelInput);
+
+      expect(changedInputComponent.props().value).toBe('+886912345678');
     });
   });
 });

config/jest/setup.js

@@ -1,5 +1,9 @@
 import jsdom from 'jsdom';
 import sinon from 'sinon';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 // localStorage
 class LocalStorageMock {

config/polyfills.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 if (typeof Promise === 'undefined') {
   // Rejection tracking prevents a common issue where React gets into an
   // inconsistent state due to an error, but it gets swallowed by a Promise,
@@ -12,3 +14,6 @@ require('whatwg-fetch');
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require('object-assign');
+
+// polyfill requestAnimationFrame: http://fb.me/react-polyfills
+require('raf/polyfill');

package.json

@@ -22,11 +22,16 @@
   "main": "dist/main.js",
   "peerDependencies": {
     "prop-types": "~15.5.8",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react": "^16.2.0 <17.0.0",
+    "react-dom": "^16.2.0 <17.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "npm": "^5.6.0",
+    "raf": "^3.4.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-style-proptype": "^3.0.0",
     "underscore.deferred": "^0.4.0"
   },
@@ -52,7 +57,7 @@
     "css-modules-require-hook": "^4.0.1",
     "detect-port": "^1.0.7",
     "dotenv": "^4.0.0",
-    "enzyme": "^2.7.0",
+    "enzyme": "^3.3.0",
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "~14.0.0",
     "eslint-config-airbnb-base": "~11.0.1",
@@ -76,7 +81,6 @@
     "lint-staged": "^3.2.6",
     "node-sass": "^4.2.0",
     "pre-commit": "^1.2.2",
-    "react-addons-test-utils": "^15.4.2",
     "react-dev-utils": "^0.4.2",
     "react-hot-loader": "^1.3.0",
     "recursive-readdir": "2.1.0",